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;
}
Related
I have the following component:
<ReactCSSTransitionGroup
transitionName={transitionName}
transitionAppear={true}
transitionLeave={true}
>
{children}
</ReactCSSTransitionGroup>
And the following css classes:
.slide-appear {
max-height: 0;
}
.slide-appear.slide-appear-active {
max-height: 100vh;
overflow: visible;
transition: max-height 500ms ease-in;
}
.slide-leave {
max-height: 100vh;
}
.slide-leave.menu-leave-active {
overflow: hidden;
max-height: 0px;
transition: max-height 500ms ease;
}
The transitions are working for appear but not for leave.
According to the documentation, you disabled leave animation by using this prop:
transitionLeave={false}
Just remove it, problem solved.
Also as quick reminder, transitionAppear is used to enable animation after initial mount of the component, not to enable enter animation.
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 learn how to use ngAnimate with ngRepeat, but in my example, the items are just showing up instead of animating in.
I included ngAnimate, put it as a dependency in the module, gave my ngRepeat a class of item, and created the following.
.item-ng-enter {
position: relative;
opacity: 0.0;
height: 0;
left: 10px;
}
.item-ng-enter.item-ng-enter-active {
transition: all 0.5s ease;
opacity: 1.0;
left: 0;
height: 18px;
}
Plnkr: http://plnkr.co/edit/EVFUww7dfUAJzQqth7mx
First thing, Angular adds .ng-enter and .ng-enter-active classes so .item-ng-enter and .item-ng-enter-active are incorrect. Second thing you should be adding transition definitions in .ng-animate class which is added before any other angular class:
.item.ng-animate { transition: all 0.5s ease; }
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 am trying to have an icon animate while loading and stop the animation once loading is complete. I was attempting this by activating a class based on a refreshing property. This worked in AngularJS 1.2.0-rc.3, but now (have tried 1.2.3 and 1.2.4) the animation never stops, and I believe the reason is that the -add classes that are added are not removed when the bound variable changes to false.
Here is the plunker demonstrating.
http://plnkr.co/edit/fbcCPxwZtcIoS0ZqrHhf?p=preview
Interesting that more toggles of the variable eventually do stop the animation. Is what I am trying to do valid, I suppose I could always just show hide a loading gif, but I liked the idea of animating the existing image
Thanks!
Curt
The problem is in your css.
You don't need '.icon-refresh-animate-add'.
Use this css class:
.icon-refresh-animate {
animation-name: rotateThis;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: rotateThis;
-moz-animation-name: rotateThis;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
It's a carbon copy of your animate-add.
Explanation: The ngClass is turning the .icon-refresh-animate class on and off. So when the state is true the class is applied and the animation loops forever. When the state is false the css class is removed so there will be no animation at all. So this bit of code does all the work for you
ng-class="{'icon-refresh-animate':refreshing}"
And here's the full CSS:
#keyframes rotateThis {
from {
transform: scale(1) rotate(0deg);
}
to {
transform: scale(1) rotate(360deg);
}
}
#-webkit-keyframes rotateThis {
from {
-webkit-transform: scale(1) rotate(0deg);
}
to {
-webkit-transform: scale(1) rotate(360deg);
}
}
.icon-refresh-animate {
animation-name: rotateThis;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: rotateThis;
-moz-animation-name: rotateThis;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}