Angular ngAnimate包含但不添加类

Question

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

这是HTML5 +角的标记：

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

这是角控制器：

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样式任何过渡的声明，所以他们立即发生，所以它不是非常动画。

  所以需要添加CSS过渡这样每个.ng-状态：

  transition:3s linear all; 
  

• 您没有设定目标<div>的position: absolute，所以left风格不相对定位的元素上做任何事情。

  <div ng-if="test === true" style="position: absolute">Hello!</div> 
  

Updated codepen example.