延迟删除视图，以便为其设置动画

Deferring removal of a view so it can be animated

本文关键字：设置 动画 删除 视图 延迟      更新时间：2023-09-26

假设我有一个模板，它显示基于属性的视图：

{{#if App.contentsAreVisible}}
    {{view ToggleContents}}
{{/if}}

通过设置App.set("contentsAreVisible", [true/false]); ，用户界面的任何其他部分都可以切换该区域

这一切都很好。

但是，我现在想在切换视图时设置动画。挂接到didInsertElement可以对显示区域进行动画处理，但在willDestroyElement中我不能这样做，因为一旦函数返回，在动画有机会运行之前，元素就会被移除。

App.ToggleContents = Ember.View.extend({
    // this works fine
    didInsertElement: function(){
        this.$().hide().show("slow");
    },
    // this doesn't work
    willDestroyElement: function(){
        this.$().hide("slow", function(){
            // animation is complete, notify that the element can be removed
        });
    }
});

有没有办法告诉视图推迟从DOM中删除元素，直到动画完成？

下面是一个交互式示例：http://jsfiddle.net/rlivsey/RxxPU/

您可以在视图上创建一个hide函数，该函数在回调完成时删除视图，请参阅http://jsfiddle.net/7EuSC/

把手：

<script type="text/x-handlebars" data-template-name="tmpl" >
    <button {{action "hide" }}>hide</button>
    This is my test view which is faded in and out
</script>​

JavaScript：

Ember.View.create({
    templateName: 'tmpl',
    didInsertElement: function() {
        this.$().hide().show("slow");
    },
    _hideViewChanged: function() {
        if (this.get('hideView')) {
            this.hide();
        }
    }.observes('hideView'),
    hide: function() {
        var that = this;
        this.$().hide("slow", function() {
            that.remove();
        });
    }
}).append();​

我知道这个已经有了正确的答案，但我想我会弹出类似的东西，以防其他人像我一样通过谷歌找到它。

我的一个应用程序有一个"详细信息"部分，该部分始终具有相同的内容绑定，但更改了查看/编辑等模式的模板。

因为我使用rerender（）来实现这一点，并且希望视图先淡出，然后再进入，这样它就可以隐藏rerender函数的任何小故障（同时让它看起来很好看），所以出于动画目的，我将其封装在了中。

<script>
_templateChanged: function(){
  self = this;
  $('#effects-wrapper').fadeOut('fast',function(){
    self.rerender();
    $(this).fadeIn('fast');
  });            
}.observes('template')
</script>

和

<div id="effects-wrapper">
{{App.Views.Whatever}}
</div>

也许不是最好的选择，但也可能对

有用
相关文章：