нг-одушевленные возвращается к исходному классу

Question

Я пытаюсь создать простую анимацию, но по какой-то причине моих нг-одушевленный возвращается к статусу .trailer

http://plnkr.co/edit/X2zjosxSLgBpCxQAkdGJ?p=preview

Когда я нажимаю трейлер ссылку я вхожу в trailer состояние,

<div ng-controller="trailerCtrl"> 
    <ul> 
    <li ng-repeat="trailer in trailers"> 
     <a href="#" ui-sref="trailer({trailer_title: '{{trailer.title}}'})">{{ trailer.title }}</a> 
     {{ trailer.link }} 
    </li> 
    </ul> 
    <div ui-view="trailer-container" class="trailer"></div> 
</div> 

Это впрыскивает шаблон из trailer состояния внутри trailer-container вид элемента.

app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise(''); 

    $stateProvider 
    .state('trailer', { 
     url: '', 
     params: { 
     trailer_title: null 
     }, 
     views: { 
     "trailer-container": { 
      template: '<div>{{ trailer_title }}</div>', 
      controller: function($scope, $stateParams){ 
      $scope.trailer_title = $stateParams.trailer_title 
      console.log ($scope.trailer_title) 
      } 
     }, 
     } 
    }) 
}) 

Тогда <div ui-view="trailer-container" class="trailer"></div> получает ng-enter и «нг-ввода-активный класс class and performs the animations. But once the animations are done it reverts back to the normal trailer`.

.trailer{ 
    background-color: red; 
    height: 50px; 
} 

.trailer.ng-enter{ 
    transition: all 5s; 
    height: 0px 
} 

.trailer.ng-enter-active{ 
    height: 700px; 
    background-color: blue; 
} 

Так как я могу остановить анимацию от возвращения назад?

Answer 1

Кажется, что это ожидаемое поведение. Добавив в другое состояние ('home'), а затем добавив класс к введенному шаблону .big и придав этому классу высоту, он будет находиться на правильной высоте.

app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('home'); 

    $stateProvider 
    .state('home', { 
     url: '' 
    }) 

    $stateProvider 
    .state('trailer', { 
     url: '', 
     params: { 
     trailer_title: null 
     }, 
     views: { 
     "trailer-container": { 
      template: '<div class="large">{{ trailer_title }}</div>', 
      controller: function($scope, $stateParams){ 
      $scope.trailer_title = $stateParams.trailer_title 
      console.log ($scope.trailer_title) 
      } 
     }, 
     } 
    }) 
}) 

CSS

.trailer{ 
    background-color: red; 
} 

.trailer.ng-enter{ 
    transition: all 2s; 
    height: 0px; 
} 

.trailer.ng-enter.ng-enter-active{ 
    height: 300px; 
} 

.large{ 
    height: 300px; 
}