css - Angular ngAnimate 包含但不添加类

Question

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

这是 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 Controller :

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.