3

当通过路线添加特定视图时,我想为 dom 元素设置动画。我知道如何为添加的视图元素设置动画,如下所示:

HTML

<div data-ng-view
     data-ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></div>

CSS3

.view-enter, .view-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.view-enter {
  opacity:0;
  left:100px;
  width:100%;
  position:absolute;
}
.view-enter.view-enter-active {
  left:0;
  opacity:1;
}

.view-leave {
  position:absolute;
  left:0;
  width:100%;
  opacity:1;
}
.view-leave.view-leave-active {
  left:-100px;
  opacity:0;
}

但我想要一个已经存在于 dom 动画中的其他元素。

我该怎么做?我想使用 jQuery 直接处理其他元素。我应该使用自定义指令吗?

4

1 回答 1

1

如果我正确理解了文档,您应该能够了解这些事件。在你的 JS 中尝试这样的事情;

$(document).on('view-enter', function(){
    alert('view-enter triggered');
    // Animation
    $('#some-element').addClass('view-enter');
});

这不一定是最好的方法,但至少它可以帮助您了解如何进行。

于 2014-03-10T22:38:42.323 回答