Is it possible to define transitions on child elements and have ngAnimate taken them into account when ngClass changes for parent elements?
So far I haven't been able to do this.
http://plnkr.co/edit/ulq1MQNDtY9cO2pcjdzF?p=preview
Thanks.
I don't think it is possible the way you are trying to do it. Angular is looking for animation/transition properties on the base class to determine timing. But in your case you all these properties is defined on child element. So as the result Angular can't wire up necessary animation hooks.
What you can do is to provide a hint for Angular when animation steps should be performed. Like this:
.container {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
This is just duplicated transition styles which tell Angular everything it needs about your transition.
Demo plunk.
Looks like providing transition-duration: 1s is only important part here, so it can be:
.container {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
}
Related
I am using the following css code, to animate my ui-view changes.
.fadein.ng-enter,
.fadeout.ng-leave {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
display: block !important;
}
.fadein.ng-enter {
opacity: 0;
}
.fadeout.ng-leave {
opacity: 1;
}
.fadein.ng-enter.ng-enter-active {
transition-delay: 1s;
opacity: 1;
}
.fadeout.ng-leave-active {
opacity: 0;
}
and here it gets applied to the ngview:
<div ui-view class="fadein fadeout"></div>
However, the route change (initiated by $state.go("home.dashboard") for example) always happens, before my ng-leave animation even started (the fadeout animation).
I tried adding the
transition-delay: 1s;
attribute, but the animation still is not executed.
I have no idea why, but adding
position: absolute;
to my ui-view div solved the issue.
I've been using Bootstrap 3, animate.css and Angular in an attempt to make a quick animation. I want the class to bounce down, stay for a few seconds and then bounce out. The bounce in works, but it never runs the seconds animation. I am in Chrome if that helps.
<alert ng-repeat="alert in alerts" type="alert.type" close="alert.close()" class="alert" ng-bind="alert.msg"></alert>
</div>
.alert {
background-color: #FFC;
font-size:16px;
font-weight:bold;
color: #1b7817;
-Webkit-animation-name: animate, bounceInDown, bounceOutUp;
-Webkit-animation-duration: 2s, 2s;
animation: animate, bounceIn, bounceOutUp;
animation-duration: 2s, 2s;
}
I was able to run two animations by changing your code slightly. Here's a fiddle http://jsfiddle.net/ysq71kap/1/
.alert {
background-color: #FFC;
font-size:16px;
font-weight:bold;
color: #1b7817;
-Webkit-animation: bounceInDown 2s ease, bounceOutUp 4s 2s ease;
animation: bounceInDown 2s ease, bounceOutUp 4s 2s ease;
}
I combined the animation into one line and then comma separated the two properties.
-webkit-animation: name duration timing-function, name duration delay timing-function;
Credit goes to #Giona Multiple webkit animations
I have a switcher directive, which has a method that creates a new scope and, using $compile on it, replaces its element with another directive, the lister one.
For example purposes, the lister directive contains a ng-repeat that iterates on the new scope.
I tried to animate the newly-created lister directive as soon as it is created with ng-enter and ng-leave classes, but it does not have any effect, or so it seems.
Is it possible to animate a directive dynamically created with $scompile? If so, what am I missing?
The code is in this plunkr.
Your selector is the issue:-
It should be .list-directive li since li's are ng-repeated.
.list-directive li.ng-enter,
.list-directive li.ng-leave {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.list-directive li.ng-enter {
margin-left: 200px;
opacity: 0;
}
.list-directive li.ng-leave,
.list-directive li.ng-enter-active {
margin-left: 0;
opacity: 1;
}
.list-directive li.ng-leave-active {
margin-left: -200px;
opacity: 0;
}
Plnkr
Or apply a class on the li's and apply rules to that. Plnkr
I am getting the class ng-animate applied to the directive but I'm not getting:
ng-hide-remove.ng-hide-remove-active or .ng-hide-remove.ng-hide-remove-active
I have angular and angular-animate 1.3 loaded. and am including ngAnimate in app.js
<div class="message animate-show {{message.type}}" ng-show="message">
{{message.text}}
</div>
The transitions are not happening:
.message.animate-show {
line-height:20px;
opacity:1;
padding:10px;
&.ng-hide-add.ng-hide-add-active,
&.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
&.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
}
}
For a simple animation like fading in/out, you need the following CSS classes:
.my-animation {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
opacity: 1;
}
.my-animation.ng-hide {
opacity: 0;
}
UPDATE:
If you have other transistion on the element that you don't want to get affected, use the following CSS definitions to only apply the transistions on the fading in/out:
.my-animation {
opacity: 1;
}
.my-animation.ng-hide {
opacity: 0;
}
.my-animation.ng-hide-add,
.my-animation.ng-hide-remove {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}
See, also, this short demo.
ExpertSystem's answer above is correct. However, if you still cannot get animation to work in Angular then you need to ensure that the ngAnimate module is added to your app:
The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks.
See Source:
https://docs.angularjs.org/api/ngAnimate
This can be done in your code that defines your AngularJS app as follows:
var app = angular.module('myApp', ['ngAnimate']);
I'm trying to apply an transition in ng-view with angular dart.
HTML:
<ng-view class="main-animation"></ng-view>
CSS:
.main-animation.ng-enter {
-webkit-transition: all 3000ms;
-moz-transition: all 3000ms;
-ms-transition: all 3000ms;
-o-transition: all 3000ms;
transition: all 3000ms;
opacity: 0;
}
.main-animation.ng-enter.ng-enter-active {
opacity: 1;
}
The animation doesn't work, the ng-enter and ng-enter-active class do not appear, and even if I simulate the class putting.
<ng-view class="main-animation ng-enter"><ngview>
The content is still rendering. Does ng-view in angular dart support animate?