2

Como fazer uma transição com CSS puro, sendo que no layout final da transição terei 2 boxes na lateral esquerda.

A transição:

Ao carregar a página, terá apenas um box com informações de avaliação. Quando eu selecionar um trecho do texto, este box desce e acima dele, deve aparecer um box que está escondido na esquerda da página, esse efeito deve ocorrer quando eu selecionar um trecho do texto o box que irá aparecer com um efeito fadeIn (todos os efeitos, tanto o de descer quanto o de aparecer, devem estar sincronizados), note que este eu tenho o exemplo do efeito no link abaixo (com javascript).

Fiddle do exemplo

Gostaria de fazer o mesmo efeito usando apenas CSS, sendo que estou usando ng-hide / ng-show do angularjs.

É possível fazer o mesmo efeito?

Aqui segue SCSS que tentei e não ficou muito bom...

  .display-mark {
          opacity:0 ;
          transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -ms-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
          //transform: translateX(0%);
          //-webkit-transform: translateX(0%);
          //-ms-transform: translateX(0%);
          //-moz-transform: translateX(0%);
          //-o-transform: translateX(0%);
          display: block;
          position: relative$i;
          animation: all 0.3s ease-in;
          -webkit-animation: all 0.3s ease-in;
          //&.anime-open-vertical,
          //&.anime-open-vertical-add {
          //  display: block;
          //  position: relative;
          //  animation: moveIn 0.4s ease-in;
          //  -webkit-animation: moveIn 0.4s ease-in;
          //}
          &.ng-animate.anime-close-vertical {
            display: block$i;
            animation: moveOut 0.4s ease-out;
            -webkit-animation: moveOut 0.4s ease-out;
          }
          &.anime-open-vertical {
            opacity:1;
            transform: translateX(0%);
            -webkit-transform: translateX(0%);
            -ms-transform: translateX(0%);
            -moz-transform: translateX(0%);
            -o-transform: translateX(0%);
            display: block$i;
          }
          &.anime-open-vertical-add,
          &.ng-animate.anime-open-vertical {
            transform: translateX(0%);
            -webkit-transform: translateX(0%);
            -ms-transform: translateX(0%);
            -moz-transform: translateX(0%);
            -o-transform: translateX(0%);
            opacity:1;
            display: block$i;
            animation: moveIn 0.4s ease-in;
            -webkit-animation: moveIn 0.4s ease-in;
          }
          &.ng-animate.ng-hide-add {
            display: none$i;
          }
          &.ng-animate.ng-hide-remove {
            display: block$i;
          }
        }
        .anime-vertical{
          //display: none$i;
          position: relative;
          height: 0;
          animation: all 0.5s ease-in;
          -webkit-animation: all 0.5s ease-in;
        }
        .display-mark.ng-animate.ng-hide {
          opacity:0;
          transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -ms-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
           display: block$i;

        }



        //.display-mark.animate-show-hide.ng-hide {
        //    opacity:0;
        //    transform: translateX(104%);
        //    -webkit-transform: translateX(104%);
        //    -ms-transform: translateX(104%);
        //    -moz-transform: translateX(104%);
        //    -o-transform: translateX(104%);
        //    display: block$i;
        //    position: relative$i;
        //}

        .anime-vertical {
          &.anime-down {
            display: block;
            position: relative;
            animation: moveDown 0.4s ease-in;
            -webkit-animation: moveDown 0.4s ease-in;
          }
          &.anime-up {
            display: block;
            position: relative;
            animation: moveUp 0.4s ease-in;
            -webkit-animation: moveUp 0.4s ease-in;
          }
        }

@keyframes moveIn {
  0% { transform: translateX(100%);  opacity: 0; position: static$i }
  50% { transform: translateX(50%);  opacity: 1; position: static$i }
  100% { transform: translateX(0%);  opacity: 1;  position: static$i }
}

@-webkit-keyframes moveIn {
  0% { transform: translateX(100%); opacity: 0; position: static$i }
  50% { transform: translateX(50%);  opacity: 1; position: static$i }
  100% { -webkit-transform: translateX(0%); opacity: 1; position: static$i }
}

@keyframes moveOut {
  0% { transform: translateX(0%); opacity: 1;position: static$i  }
  50% { transform: translateX(50%);  opacity: 1; position: static$i }
  100% { transform: translateX(100%); opacity: 0; position: static$i  }
}

@-webkit-keyframes moveOut {
  0% { -webkit-transform: translateX(0%);  opacity: 1; position: static$i  }
  50% { transform: translateX(50%);  opacity: 1; position: static$i }
  100% { -webkit-transform: translateX(100%);  opacity: 0; position: static$i  }
}

/**

 */
@keyframes moveUp {
  0% { height: 310px; }
  100% { height: 0px; }
}

@-webkit-keyframes moveUp {
  0% { height: 310px; }
  100% { height: 0px; }
}

@keyframes moveDown {
  0% { height: 0px; }
  100% { height: 310px; }

}

@-webkit-keyframes moveDown {
  0% { height: 0px; }
  100% { height: 310px; }
}
            <div id="scroller_content" class="scroll-forms" ng-class="{'no-overflow': !variavel_true_false}">

BOX 1:

<div id="form_mark_box" ng-show="variavel_true_false" class="display-mark" ng-class="{'anime-open-vertical':(variavel_true_false),'anime-close-vertical':(!variavel_true_false)}"><!-- BOX 1 -->nonono nonono</div>

BOX 2:

<div id="animate-down-element" class="anime-vertical" ng-class="{'anime-down':(variavel_true_false), 'anime-up':(!variavel_true_false && data_review.animeUp)}"></div>
                    <div  id="form_prod_textual" ng-style="data_review.reposition_form_producao_textual" class="form-rule-actions form-producao-textual">
                        <form class="form-review">
<!-- BOX 2 --> nonono nonono
</form>
</div>

Aqui tem um vídeo que mostra o problema.

0

1 Resposta 1

5

Ivan sim é possível resolver o problema só com CSS, mas vc tem que ter uma Estrutura de HTML + CSS que seja coerente.

Digo, vc vc vai precisar de regras como :focus + div ou :target ~ div etc, então para algumas regras CSS poderem ser aplicadas a estrutura do HTML tem que "colaborar" com a metodologia de se fazer tudo com CSS.

inserir a descrição da imagem aqui

Aqui tem um exemplo prático. Eu fiz usando :target, mas vc pode fazer com label for IDchebox. (não recomendo fazer com :focus, pq quando vc clicar em qq lugar da tela o elemento vai se fechar sozinho)

Repare que no exemplo eu tenho um texto dentro de um link, e quando esse link é clicado faz um :target. O elemento quando receber esse target ativa a animação, e quando "perde" o targe no link fechar a animação retrocede. Para a animação foi usado transition e transition-delay, assim fica fácil sincronizar para um acontecer só depois do outro.

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.container {
	position: relative;
	overflow: hidden;
	height: 100%;
}
.box-fecha,
.box-abre {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: green;
	top: 0;
}
.box-fecha {
	right: 0;
	transition: all 500ms;
}
.box-abre {
	background-color: red;
	right: -100px;
	transition: all 500ms;
	transition-delay: 500ms;
}
#fecha:target ~ .box-fecha{
	top: 100px;
	transition-delay: 0ms;
}
#fecha:target ~ .box-abre{
	right: 0px;
	transition-delay: 500ms;
}
#abre:target ~ .box-fecha{
	top: 0px;
	transition-delay: 500ms;

}
#abre:target ~ .box-abre{
	right: -100px;
	transition-delay: 0ms;

}

#abre, 
#fecha {
	display: none;
}

.texto {
	display: inline-block;
	width: 200px;
	border: 1px solid #000;
	text-decoration: none;
	color: initial;
}

	
<div class="container">
  <a href="#fecha" class="texto">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad veritatis necessitatibus facilis distinctio? Neque rem saepe mollitia error, minus ex voluptas aspernatur ratione eius totam illo, nesciunt tempore veniam qui.
  </a>
  <div id="fecha">fecha</div>
  <div id="abre">abre</div>
  <div class="box-fecha" id="teste">
    <a href="#abre">fecha</a>
  </div>
  <div class="box-abre"></div>
</div>

9
  • Então, o efeito é similar a isso, mas não posso usar target, eu posso passar uma classe no ng-class, durante o evento... pois enquanto o evento de mostrar/exibir ocorre, ele também recebe algumas classes, ng-animate, ng-hide-add, ng-hide-remove... Commented 28/05/2019 às 11:01
  • @IvanFerrer então basta onde está #fecha:target ~ .box-fecha ou #abre:target ~ .box-abre vc colocar nomes de classes, sem precisar do :target tipo #fecha.ng-animate ~ .box-abre ou #abre.ng-animate ~ .box-fecha. Isso é só um exemplo. Mas o que vc tem que entender é o transition e o transition-delay é com eles que vc vai sincronizar a animação. E o conceito do seletor ~ que significa que quando um elemento #ID acima receber o ng-animate o elemento .classe abaixo vai receber a animação
    – hugocsl
    Commented 28/05/2019 às 11:08
  • Eu coloquei uma classe mãe, para acionar os eventos do tipo target, o evento de sair funciona, mas não da maneira que deveria, porém mesmo assim o problema maior é que eu estou trabalhando com elementos que possuem alturas variadas, pois estão com position: relative ou static, no seu exemplo você usou position: absolute, o que limita a ação... Commented 29/05/2019 às 11:15
  • @IvanFerrer esse exemplo seria para uma situação "ideal" realmente. Mas é o conceito que importa, quando fiz a resposta eu já imaginava que vc precisaria adaptar alguma coisa. Se vc quiser abre outra pergunta e coloca o que vc tem de código no momento e qual é o problema que está tendo ai com detalhes. Ou se preferir pega essa código da Resposta e posta uma Pergunta explicando que esse modelo funciona bem com valores fixos, mas vc precisa que funcione com valores variáveis pq vc não sabe o tamanho que o bloco vermelho de cima vai ter etc. Dessa forma fica mais fácil para eu ou outro te ajudar
    – hugocsl
    Commented 29/05/2019 às 11:39
  • Eu coloquei um vídeo para expor meu problema. Veja que quando cancelo, ao invés do box subir suave, ele sobe direto... no caso, isso acontece porque ele não é um elemento absoluto, porém quando coloco ele como absoluto, ele sobe suave, porém, não espera o elemento de cima sumir, e já começa a subir... Commented 29/05/2019 às 11:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .