我一直在谷歌和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