采用NG-动画与animate.css [英] Using ng-animate with animate.css
问题描述
我试图理解和使用ngAnimate。
I'm trying to understand and use ngAnimate.
我用角animate.js，animate.css和角1.3。
I'm using angular-animate.js, animate.css and angular 1.3.
现在，我已经加在我的应用程序的conf ngAnimate来激活它，我已经加入到我的CSS这样的事情：
Right now, I've add on my app conf ngAnimate to activate it and I've add to my css something like that :
.ng-leave{
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
它的工作，因为，fadeInUp是申报animate.css。
It's working because, fadeInUp is declare in animate.css.
所以，现在我想做同样的事情，而无需编写CSS（由中庸之道使用animate.css）
So, now I would like to do the same thing without writing css (by juste using animate.css)
我已经试过类似的东西，但它不工作
I've tried something like that, but it's not working
<li class="list cars" ng-repeat="item in cars track by item.id" ng-animate="{enter: 'fadeInUp animated', leave: 'fadeOutUp animated'}">
任何想法？
感谢
推荐答案
步骤： -
1）提供相关性： -
1) Provide dependency:-
angular.module('yo', [
'ngAnimate'
]);
在你的脚本标签增加了角animate.min.js。
with "angular-animate.min.js" added in your script tag.
2）有三种方法来执行动画： -
一）CSS过渡。
B）CSS动画关键帧
C）JavaScript的动画。
2) There are three ways to perform animation:- a)CSS Transitions. b) CSS Keyframe Animations c) JavaScript Animations.
3）选择上述任何如： -
例如，如果你的模板是
3) Choose any of the above like:- For example if your template is
<div ng-init="on=true">
<button ng-click="on=!on">Toggle On/Off</button>
<div class="my-special-animation" ng-if="on">
This content will enter and leave
</div>
</div>
通过 CSS转换类需要在你的元素属性，只需添加以下CSS
动画： -
Animation by CSS Transition required class attribute in your element and just add following css:-
.my-special-animation.ng-enter {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
background:red;
}
/* destination animations */
.my-special-animation.ng-enter.ng-enter-active {
background:blue;
}
plunker： - http://plnkr.co/edit/?p=$p $ PVIEW
CSS关键帧动画比转换更加广泛，它们是由同一个浏览器（IE9比及以下等）的支持。 CSS的命名风格是相似的，但没有必要使用-active类，因为关键帧动画是完全一个CSS @keyframes声明块中管理
CSS Keyframe animations are more extensive than Transitions and they're supported by the same browsers (other than IE9 and below). The CSS naming style is similar, but there is no need to use an -active class since keyframe animations are fully managed within a CSS @keyframes declaration block
.my-special-animation.ng-enter {
-webkit-animation:0.5s red-to-blue;
animation:0.5s red-to-blue;
}
@keyframes red-to-blue {
from { background:red; }
to { background:blue; }
}
@-webkit-keyframes red-to-blue {
from { background:red; }
to { background:blue; }
}
Plunker： - http://plnkr.co/edit/?p=$p $ PVIEW
JavaScript的动画
如果你想执行有更多的控制动画，那么你可以随时使用JavaScript的动画。这通过定义你的模块code内部的工厂般的功能，像这样：
JavaScript Animations If you want to perform animations that have more control then you can always use JavaScript animations. This works by defining a factory-like function inside of your module code like so:
myApp.animation('.my-special-animation', function() {
return {
enter : function(element, done) {
jQuery(element).css({
color:'#FF0000'
});
//node the done method here as the 2nd param
jQuery(element).animate({
color:'#0000FF'
}, done);
return function(cancelled) {
/* this (optional) function is called when the animation is complete
or when the animation has been cancelled (which is when
another animation is started on the same element while the
current animation is still in progress). */
if(cancelled) {
jQuery(element).stop();
}
}
},
leave : function(element, done) { done(); },
move : function(element, done) { done(); },
beforeAddClass : function(element, className, done) { done(); },
addClass : function(element, className, done) { done(); },
beforeRemoveClass : function(element, className, done) { done(); },
removeClass : function(element, className, done) { done(); },
allowCancel : function(element, event, className) {}
};
});
Plunker： - http://plnkr.co/edit/?p=$p $ PVIEW
这篇关于采用NG-动画与animate.css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
