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.