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视图元素中的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-active class and performs the animations. But once the animations are done it reverts back to the normal预告片类。

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

ng-animate恢复原始类

1 个答案: