3

我在我的 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 中设置这种动画的最佳方法是什么？

4

3 回答 3

3

比我最初想象的要容易；为外包装 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 插件，即使我认为这对这项任务特别无用，这似乎是一项不错的工作；无论如何，我更喜欢上述解决方案，因为它是轻量级的......

于 2013-09-26T14:56:05.553 回答
0

在App.SlideShowView你可以使用didInsertElementandwillDestroyElement钩子来触发动画。您可能希望在视图的主 DOM 元素上触发动画。

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

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

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

于 2013-09-26T06:25:39.507 回答
-1

目前的视图渲染不是异步的，因此您可能会遇到一些问题，例如：已删除对象上的 css 转换，因为 css 转换是异步的。我建议您使用ember-animated-outlet。并更改您的模板以使用animatedOutlet而不是条件。

我希望它有帮助

于 2013-09-26T14:17:54.157 回答