Question

我希望在通过路径添加特定视图时为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直接寻址其他元素。我应该使用自定义指令吗？

Answer 1

如果我正确理解文档，您应该能够挂钩事件。在JS中尝试这样的东西;

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

这不一定是这样做的最佳方式，但至少它可能会帮助您了解如何继续进行。

在AngularJS中添加其他dom元素时动画dom元素

1 个答案: