Угловой ngAnimate включен, но не добавляет классы

Question

У меня есть простая кодировка, чтобы продемонстрировать мою проблему. Я также просмотрел все похожие потоки, но не смог решить эту проблему.

Это 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; 
  

• Вы не установили position: absolute на цель <div>, поэтому left стиль не делает ничего на относительно позиционируемый элемент ,

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

Updated codepen example.