ng-animate 恢复到原始类答案

【问题标题】：ng-animate reverts back to original classng-animate 恢复到原始类
【发布时间】：2015-12-09 20:20:54
【问题描述】：

我正在尝试设置一个简单的动画，但由于某种原因，我的 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 状态注入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 和'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;
}

那么我怎样才能阻止动画恢复呢？

【问题讨论】：

标签： angularjs ng-animate

【解决方案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;
}

【讨论】：