ng-animate恢复为原始类

Question

我正在尝试设置一个简单的动画，但是由于某种原因，我的ng-animate返回到.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-container视图元素内部的trailer状态注入模板。

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和'ng-enter-activeclass and performs the animations. But once the animations are done it reverts back to the normaltrailer`‘类。

.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;
}