Question

我有一个简单的codepen设置来演示我的问题。我也查看了所有类似的线程，但仍然无法解决这个问题。

这是HTML5 + Angular标记：

 <div ng-app="test" ng-controller="testController">
  <div ng-if="test === true">Hello!</div>
  <button ng-click="test = !test">Toggle</button>
</div>

这是Angular控制器：

var app = angular.module('test', ['ngAnimate']);
app.controller('testController', function($scope){
  $scope.test = true;
});

这是CSS：

.ng-enter{
  left: -100%;
}

.ng-enter.ng-enter-active{
  left: 0%;
}

.ng-leave{
  left: 0%;
}

.ng-leave.ng-leave-active{
  left: 100%;
}

以下是交互式笔的链接：http://codepen.io/anon/pen/WvoGjg

我错过了什么吗？我的版本是相同的，模块包含在init函数中...... ARG！

Answer 1

它正在运作，你只是没有看到任何事情发生，因为你有两个问题：

您没有在CSS样式中包含任何转换声明，因此它们会立即发生，因此它不是非常动画。

为每个.ng-状态添加这样的CSS转换：
```
transition:3s linear all;
```
您尚未在目标position: absolute上设置<div>，因此left样式在相对定位的元素上不会执行任何操作。
```
<div ng-if="test === true" style="position: absolute">Hello!</div>
```

Updated codepen example.

Angular ngAnimate包括但不添加类

1 个答案: