I have been using ReactCSSTransitionGroup for basic animations - like slide in from left to right and right to left 2 images, but not able to acheive it - what am I missing here - the images animate but go back to their original position as soon as the animation is over - it is not looking good on the screen.
<ReactCSSTransitionGroup transitionName="square1" transitionAppear transitionEnterTimeout={1000}>
<img key={this.state.altText} alt="image" className="square-1" src="/images/sqr.svg" />
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup transitionName="square2" transitionAppear transitionEnterTimeout={1000}>
<img key={this.state.altText} alt="image" className="square-2" src="/images/sqr2.svg" />
</ReactCSSTransitionGroup>
css:
.square-1{
opacity: 0.4;
float:left;
position: absolute;
top:60px;
width: 150px;
left:-35px;
}
.square-2{
opacity: 0.4;
float:right;
width: 150px;
position: absolute;
right:-10px;
top:30px;
}
.square1{
position: absolute;
border:1px solid green;
left:10px;
top:90px;
}
.square1-appear {
opacity: 0.01;
transition: all 2s linear;
position:absolute;
left:-200px;
}
.square1-appear.square1-appear-active {
opacity: 0.4;
transition: all 2s ease-in;
position:absolute;
left:-30px;
top:-10px;
}
.square1-leave.square1-leave-active{
border:1px solid red;
}
.square2{
position: absolute;
right:10px;
top:30px;
}
.square2-appear {
opacity: 0.01;
transition: all 4s ease-in;
position:absolute;
right:-200px;
}
.square2-enter {
opacity: 0.01;
position:absolute;
right:-400px;
}
.square2-appear.square2-appear-active {
opacity: 0.8;
transition: all 2s ease-in;
position:absolute;
right:100px;
}
I get an issue with ngAnimate and ngMessages currently. I am able to animate when the message appear but not when it disappear.
If anyone can help me on this because the documentation don't seems very "clear" to me.
Here's my HTML :
<div ng-messages="loginError" class="login-error" flex layout layout-align="center center">
<p ng-message="invalid_credentials">Combinaison d'email et de mot de passe <strong>invalide.</strong></p>
<p ng-message="could_not_create_token">Impossible de créer le jeton</p>
<p ng-message="unknown_error">Erreur inconnue.</p>
</div>
And here's my CSS :
.login-error {
color: #DD2C00;
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
max-height: 0;
opacity: 0;
}
.login-error.ng-active, .login-error.ng-active.ng-active-add-active {
max-height: 30px;
opacity: 1;
}
.login-error.ng-inactive, .login-error.ng-active.ng-inactive-add {
max-height: 0;
opacity: 0;
}
.login-error {
color: #DD2C00;
-webkit-transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-o-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.login-error.ng-active {
max-height: 30px;
}
.login-error.ng-inactive {
max-height: 0;
}
.login-error-msg {
-webkit-transition: all linear 0.5s;
-moz-transition: all linear 0.5s;
-o-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.login-error-msg.ng-enter {
opacity: 0;
max-height: 0;
}
.login-error-msg.ng-enter-active {
opacity: 1;
max-height: 30px;
}
.login-error-msg.ng-leave {
opacity: 1;
max-height: 30px;
}
.login-error-msg.ng-leave-active {
opacity: 0;
max-height: 0;
}
Solved my issue !
I'm trying to animate chips created by md-chips, angular-material, but it does not work.
here is my css codes:
#-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
#-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
#keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
opacity: 0;
}
}
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
.md-chip.ng-leave {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
and HTML:
<md-chips class="custom-chips" ng-show="elems.length" ng-model="elems" readonly="true">
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
<button md-chip-remove class="md-primary">
<md-icon md-svg-icon="md-close"></md-icon>
</button>
</md-chips>
but no animation showing and everything goes normal!
I read some tutorials and whatever they said step by step but i think it's not gonna work with md-chips work some reasons.
You need to specify a duration, for example:
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
Or simply:
.md-chip.ng-enter {
-webkit-animation: zoomIn 1s;
animation: zoomIn 1s;
}
Demo: http://plnkr.co/edit/L36jyc3WFW9cRuu4Cybs?p=preview
To elaborate on tasseKATT's answer, if you add max-height property to the animation to go from max-height: 0px; to max-height: 50px; (for example), then the content will not be so jumpy when a the last chip from a row is removed, or when another chip is added and it creates another row.
See sample below for css and the demo on Plunker (just a fork):
#-webkit-keyframes zoomIn {
from {
max-height: 0px;
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
max-height: 50px;
opacity: 1;
}
}
#keyframes zoomIn {
from {
max-height: 0px;
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
max-height: 50px;
opacity: 1;
}
}
#-webkit-keyframes zoomOut {
from {
max-height: 50px;
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
max-height: 0px;
opacity: 0;
}
}
#keyframes zoomOut {
from {
max-height: 50px;
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
to {
max-height: 0px;
opacity: 0;
}
}
.md-chip.ng-enter {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation: zoomIn 1s;
animation: zoomIn 1s;
}
.md-chip.ng-leave {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
I'm trying to get a height animation working using Angular JS 1.2. I've got a plunker here that has the animation working for closing the item:
http://plnkr.co/edit/YVtnXgjO3Evb6tz5DJOp?p=preview
With the key bit being this CSS here:
.accordion-body {
height: 100px;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.animate-show.ng-hide-remove {
display: block !important;
}
.accordion-body.ng-hide-add{
}
.accordion-body.ng-hide-remove{
}
.accordion-body.ng-hide {
height:0;
}
But I can't figure out how to get it to work for opening the item. I'm obviously doing something braindead - what am I missing?
Got it working with the following CSS:
.accordion-body {
height: 100px;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.accordion-body.ng-hide-remove {
display: block !important;
height: 0px;
}
.accordion-body.ng-hide-remove.ng-hide-remove-active {
height: 100px;
}
.accordion-body.ng-hide-add{
height: 100px;
}
.accordion-body.ng-hide-add.ng-hide-add-active {
height: 0;
}
You messed up a class name is all.
I'm using ngAnimate to animate max-height for a simple slide-toggle effect, and there's something a bit strange happening: when hiding, it seems that setting the transition property on the setup class (.xxx-hide) doesn't work--the height snaps to 0 immediately:
.controls-hide {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
max-height: 5em;
opacity: 1;
}
.controls-hide.controls-hide-active {
max-height: 0em;
opacity: 0;
}
But setting it on the active class (.xxx-hide.xxx-hide-active), the animation works just fine:
.othercontrols-hide {
opacity: 1;
max-height: 5em;
}
.othercontrols-hide.othercontrols-hide-active {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
max-height: 0em;
opacity: 0;
}
(Here's the whole fiddle.)
Even more strangely, the opacity animates just fine in both cases. What's going on here?
I just follow the instructions at this site: http://www.nganimate.org/angularjs/ng-repeat/appear
And I got this fiddle working: http://jsfiddle.net/WXWSu/2/
What I changed was set the transtion tag to all changes (transition: 1s linear all;), and set the start properties at the main class:
.exercise-controls {
overflow: hidden;
border: 1px solid black;
height: 5em;
opacity: 1;
}