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

我无法理解

ngAnimate

是如何准确工作的。这是我的疑问

1）

ngAnimate

-仅适用于

指令

2） 如何使

ng动画

在没有

指令的情况下工作

3） 以上任何一种方式，在

动画

完成后如何添加回调

因为我看到的所有

动画

示例都只有

指令

我这里有一个小演示，有没有人可以帮我制作动画，既不使用

指令

，也不使用

指令

方法，只添加一个类名为'fade'

我的代码：

<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>

点击我
让我淡出
点击我
让我淡出

在这个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文件中，我为类animate添加了css，如果变量为true则该类将作用于单击的变量 否则，它将处于活动状态

我无法理解ngAnimate是如何工作的。这是 我怀疑

ngAnimate

是一个模块，为angular应用程序中的动画提供支持。当使用

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>
  

1） ngAnimate-仅对指令有效

对。没有指令，不能使用ngAnimate

根据，以下指令为“动画感知”：

• ngRepeat

  ，

  ngView

  ，

  ngInclude

  ，

  ngSwitch

  ，

  ngIf

  ，

  ngClass

• ngShow

  ，

  ngHide

  ，

  ngModel

  ，

  ngMessages

  和

  ngMessages

2） 如何使ng animate在没有指令的情况下工作

你不能！。请记住，即使是

ng click

也是一个指令

3） 以上任何一种方式，动画完成后如何添加回调

是的，您可以使用服务（通常在自定义指令中完成）在动画完成后添加回调，并使用

$animate.leave（元素，[options]）

在动画结束后触发事件时，请查看此选项

最后，这里是您在问题中提到的更新版本

每次单击
可以将
标志切换为真/假，并根据标志隐藏/显示
内的内容

  <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>

希望有帮助
 对于我的场景，如何实现
回调
函数？
<script src="ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js">
</script>

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

  <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>

.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;
}