2

在我的一个部分中,我这样做:

<!-- Lesson Details -->
<div class="panel" id="change_subject" ng-if="$state.includes('dashboard.create.lessons')" ng-animate="{enter: 'basic-animation-enter', leave: 'basic-animation-leave'}">
  <div class="panel_header">
    <div class="panel_title">
      <h5>
        Lesson Details
      </h5>
    </div>
  </div>
</div>

$state.includes 直接来自 angular-ui 路由器示例。当然,我正在使用角度 ui。

这是我的 appState 函数:

state('dashboard.create.lessons.detail', {
        // parent: 'lessons',
        url: '/{lessonId}',
        views: {
          'details@dashboard.create': {
            templateUrl: "/app/partials/create.detail.html",
            controller: ['$scope', '$stateParams', 'curriculumHash', function(scope, stateParams, curriculumHash){
              curriculumHash.sstHash().then(function() {
                scope.selectedContent = findInList(scope.sstArray, stateParams.lessonId);
                scope.original = angular.copy(scope.selectedContent);
               });
            }],
          }
        }
      })

很普通。

当为每个新的 stateParam 重新加载部分时,ng-if 会创建一个新的 DOM 元素(带有新的 Hash $$)。而且每次调用“进入”动画都没问题。但是被破坏的 DOM 元素并不是在调用“离开”。

如果我没有做错任何事情,那么我应该要求一种更好的方法来做到这一点 - 也就是说,如何使用新参数为重新加载的视图设置动画......

谢谢!

========== 更新 ========== 这是一个 JSFiddle。没有从上面的代码中借用很多东西,但我很确定这一点。http://jsfiddle.net/morgs32/xPxkX/1

4

1 回答 1

2

您正在使用1.1.5带有1.1.4类名称的版本。

看这个文档:NgAnimate 1.1.5

在这个站点,有很多例子:Ng-Animate Slider Effect

使用 css 工作的新小提琴:http: //jsfiddle.net/fzKVN/1/

于 2013-07-04T00:11:29.453 回答