我一直在谷歌和Stackoverflow上搜索,但还没有找到我在找什么。模型更改时的AngularJS动画
这是我的。我保证我正在做出真诚的努力来弄清楚这一点。
问题如下:我有动画使用列表。当我使用超时将项目添加到列表中时,它们会正确地进行动画。但是,“title”变量是一个字符串。我想在此值更改时应用动画。坦白地说,我现在仍然无能为力,如何才能实现这一目标。我明白我可以为ng-hide的动画添加css类,但我仍然不太明白如何在这里适合。提前感谢任何帮助。请赐教。你不必给我代码。即使是关于如何实现这一点的高层次描述也足够了。
// app.js
(function() {
var app = angular.module("MyApp", ["ngAnimate"]);
// route configuration
}());
// homecontroller.js
(function() {
var app = angular.module("MyApp");
app.controller("HomeController", ["$scope","$timeout", homeController];
function homeController($scope, $timeout) {
$scope.items = ["Frodo", "Bilbo", "Merry", "Pippin", "Sam"];
$scope.title = "The Hobbits";
$timeout(function() {
$scope.title = "The Hobbits and the Wizard";
$scope.items.unshift("Aragorn","Faramir","Boromir");
}, 5000);
}
}());
一些HTML
<!-- view for HomeController -->
<h1>{{ title }}</h1>
<div ng-controller="HeaderWebpart.HeaderController">
<div class="testClass" style="display:block;" ng-repeat="item in items">{{ item }}</div>
</div>
和CSS
div.testClass.ng-enter {
-webkit-animation: enter 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
animation: enter 1000ms cubic-bezier(0.250, 0.100, 0.250, 1.000);
display: block;
position: relative;
}
@-webkit-keyframes enter {
from {
opacity: 0;
height: 0px;
left: -70px;
}
75% {
left: 15px;
}
to {
opacity: 1;
height: 20px;
left: 0px;
}
}
div.testClass.ng-enter-active {
opacity: 1;
}
此网站可能会对您有所帮助:http://daneden.github.io/animate.css/。正如你所看到的,当实际的动画运行时,有一个'.animate'类。另外,还有一个'.infinite'类可以被添加来不断重复动画(不超过设定的时间)。 – dward 2015-04-03 20:28:27
谢谢你张贴这个 - SUPER有帮助。 – Beebunny 2015-04-05 07:13:28