Question

我在我的Ember应用程序中使用了许多自定义视图，这些视图是动态插入或从DOM中删除的。

一切正常，但我想在插入或删除视图时使用平滑的jquery动画。例如，我有这个观点：

<div id="container">
    {{#if App.slideShow}}
        {{view App.SlideShowView}}
    {{/if}}
</div>

通常容器的高度为0px，它会根据视图的高度而变化;但是当插入视图时，它会突然发生。我想要像：

$('#container').slideDown(300);
//now the view should became visible

当视图被删除时，我想要像：

//the view becomes invisble
$('#container').slideUp(300);

在Ember中设置此类动画的最佳方式是什么？

Answer 1

比我最初的想法容易; 设置外包装div（容器）的动画就足够了，而不是为视图本身设置动画

didInsertElement: function() {
    var that = this;
    $('#container').animate({height: 364}, 300, function(){
        that.activateSlide();  //call method to activate jquery plugin
    });

},
willDestroyElement: function() {
    $('#container').animate({height: 0}, 300);
}

通过这种方式，如果视图是否在DOM中，则“容器”的尺寸不受条件限制; 感谢你建议使用ember-animated-outlet插件，即使我认为特别是对这项任务没有用，这似乎是一项很好的工作;在任何情况下，我更喜欢上述解决方案，因为它是轻量级的......

Answer 2

在App.SlideShowView中，您可以使用didInsertElement和willDestroyElement挂钩来触发动画。您可能想要在视图的主DOM元素上触发动画。

App.SlideShowView = Ember.View.extend({
  didInsertElement : function(){
    this.$().slideDown(300);
  },
  willDestroyElement : function(){
    this.$().slideUp(300);
  }
});

另一种选择是Ember Animated Outlet，但它的目的是为了实现从路线到路线的过渡动画。看起来你并没有真正做到这个“Ember Way”，所以它可能不适合你。

https://github.com/billysbilling/ember-animated-outlet

Answer 3

此时的视图渲染不是assync，因此您可能遇到一些问题：css过渡被删除的对象，因为css过渡是assync。我建议你使用ember-animated-outlet。并将模板更改为使用animatedOutlet而非条件。

我希望它有所帮助

从DOM插入/删除ember视图时的平滑动画

3 个答案: