2015-04-03 73 views
0

我一直在谷歌和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; 
} 
+0

此網站可能會對您有所幫助:http://daneden.github.io/animate.css/。正如你所看到的,當實際的動畫運行時,有一個'.animate'類。另外,還有一個'.infinite'類可以被添加來不斷重複動畫(不超過設定的時間)。 – dward 2015-04-03 20:28:27

+0

謝謝你張貼這個 - SUPER有幫助。 – Beebunny 2015-04-05 07:13:28

回答

1

您目前有沒有任何適用的動畫邏輯來<h1>元素,只需在控制器內將值分配給title不足夠。

如果您查看角動畫文檔 https://docs.angularjs.org/api/ngAnimate - 您會看到只有一組特定的指令具有動畫掛鉤。每個指令通常都有一個輸入/離開或添加/刪除動畫的配對。這意味着角添加和刪除特定的CSS類這些元素,你可以用它來執行與動畫,類似於你已經與ng-repeat指令完成,testClass動畫上面:

.yourAnimationCSSClass.ng-enter { } 
    => what your element should look like before the animation starts 
     what the change should be and the duration 

.yourAnimationCSSClass.ng-enter.ng-enter-active { } 
    => ending(stable) state for your animation, ie. what the 
     element should look like when you're done 

... ng-leaveng-leave-active工作類似。

因此,爲了解決這個問題,您可以使用ngClass來選擇設置一個CSS類。這最終與Angular開發人員指南中的Class and ngClass animation hooks示例非常接近,因此請查看該示例。

+0

通常可以使用ngClass =「title!=''?'myAnimationCSSClass':''」','ngIf =「title!=''」'或'ngShow =「來創建一些次要的模板魔法。 title!=''「'讓你的代碼更加簡潔一些,或者如果你已經定義了一些動畫鉤子,可以使用不同的動畫鉤子,但是每個人都可能不理解這種方法。儘管如此,其中的任何一項都應該允許您只寫入控制器中的作用域變量並應用動畫而不手動觸發它。 – orbitbot 2015-04-03 21:59:33

+0

orbitbot - 謝謝你的迴應。與其他人說的一起使用。乾杯。 :d – Beebunny 2015-04-05 07:12:59