Question

我无法理解ngAnimate的确如何运作。这是我的疑问。

1）ngAnimate - 仅适用于directives？

2）如何在没有ng-animate

的情况下让directive工作

3）以上任何一种方式，如何在animation完成后添加回叫？

因为我只看到了所有animation示例{。}}。

我在这里有一个小型演示，任何一个人都可以帮助我进行动画制作而不需要directives和directive方法来简单地添加一个类名作为“fade＆＃39;？

我的代码：

directive

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>

并在您的myApp模块中包含ngAnimate作为依赖项。
```
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>切换为true / false，并根据标记隐藏/显示<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>

我添加了一个名为点击的变量，其设置为 true 或 false 设置为动画让我褪色文本

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

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

点击点击我按钮后，在此JS文件中，点击的变量设置为 true 或 false 。

**

 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，如果变量为 true ，它会对点击的变量起作用，它将用于 animate-enter-active 否则它会用于离开活动

如何使用ngAnimate制作简单的动画

2 个答案: