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).
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.