如何使用ngAnimate製作簡單動畫

Question

我無法理解ngAnimate的工作原理。這是我的疑問。

1）ngAnimate - 僅適用於directives？

2）如何使ng-animate工作沒有directive

3）以上任何方式，如何添加回調animation完成後？

因爲我看到所有animation示例僅與directives。

我在這裏有一個小演示，任何一個幫助我動畫都沒有directive和directive方法來簡單地添加一個類名稱爲'淡入'？

我的代碼：

<div class="container" ng-app="myApp"> 
    <div class="content" ng-controller="count"> 
     <h1 ng-click="animate()">Click ME</h1> 
     <h2>Let me Fade</h2> 
    </div> 
</div> 
<div class="container" ng-app="myApp"> 
    <div class="content" ng-controller="count"> 
     <h1 ng-click="animate()">Click ME</h1> 
     <h2>Let me Fade</h2> 
    </div> 
</div> 

Demo to update

Answer 1

我無法理解ngAnimate是如何工作的。這裏是我的疑問 。

ngAnimate是一個模塊，它爲角度應用中的動畫提供支持。當使用ngAnimate時，有兩種使用動畫的方法：使用CSS和JavaScript。 對於基於CSS的動畫，無論何時從'視圖'中顯示/刪除元素，angularjs都會添加類ng-enter/ng-leave。你只需要與這些類一起玩，使動畫工作！

先決條件：

• 您將需要添加庫angular-animate

  <script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js"> 
  </script> 
  

• ，包括ngAnimate作爲依賴你myApp模塊中。

  var myApp = angular.module('myApp', ['ngAnimate']); 
  

1）ngAnimate - 僅適用於指令？

是的。如果沒有指令，你不能使用ngAnimate。

據documentation，下面的指令是 「動畫知道」：

• ngRepeat，ngView，ngInclude，ngSwitch，ngIf，ngClass，
• ngShow，ngHide，ngModel，ngMessages和ngMessage

2）如何在沒有指令的情況下製作ng-animate作品

你不能！請記住，即使ng-click是一個指令

3）以上任何一種方式，如何在動畫完成後添加回調？

是的，您可以添加一個回調的動畫完成使用$animate服務（這通常會在自定義指令來完成），並使用$animate.leave(element, [options]);

看一看這個example爲後觸發事件後，動畫結束。

最後，這裏是您提到的更新的demo問題。

您可以切換flag爲真/假，每次點擊<h1>，並根據標記隱藏/顯示<h2>內容。

<div class="container" ng-app="myApp"> 
     <div class="content" ng-controller="count"> 
      <h1 ng-click="animate()">Click ME</h1> 
      <h2 ng-if="flag" class="fade">Let me Fade</h2> 
     </div> 
    </div> 

此外，你需要處理與CSS漸變效果

.fade.ng-enter { 
    transition:0.5s linear all; 
    opacity:0; 
} 
.fade.ng-enter.ng-enter-active { 
    opacity:1; 
}  
.fade.ng-leave { 
    transition:0.5s linear all; 
    opacity:1; 
} 
.fade.ng-leave.ng-leave-active { 
    opacity:0; 
} 

希望它能幫助！

Answer 2

<div class="container" ng-app="myApp"> 
<div class="content" ng-controller="count"> 
    <h1 ng-click="animate()">Click ME</h1> 
    <h2 ng-if="clicked" class="animate-if">Let me Fade</h2> 

</div> 

我添加了一個名爲變量點擊被設置爲真或假到動畫讓我自己淡出文本

var myApp = angular.module('myApp', []); 

myApp.controller('count', function($scope) { 
    $scope.clicked=false; 
    $scope.animate = function() { 
    $scope.clicked=!$scope.clicked;  
    } 
}); 

在這個當點擊JS文件的單擊我按鈕點擊設置爲真或假變量。

** 

h2.fade { 
    opacity : 0; 
    transition: opacity 1s ease-in-out; 
} 
.animate-enter, .animate-leave { 
transition: 500ms ease-in all; 
position: relative; 
display: block; 
} 
.animate-enter.animate-enter-active, .animate-leave { 
left: 0; 
} 
.animate-leave.animate-leave-active, .animate-enter { 
left: 500px; 
} 

**

在這裏，在我加入的CSS類動畫作用在點擊變量如果變量是真正它也適用於動畫進入活躍 否則CSS文件去離開活躍