推迟删除视图，使其可以动画化 [英] Deferring removal of a view so it can be animated

问题描述

说我有一个基于属性显示视图的模板：

  {{如果App.contentsAreVisible}} 
 {{查看ToggleContents}} 
 {{/ if}} 
  

通过设置 App.set（contentsAreVisible，[true / false]）;

，可以在UI的任何数量的其他部分切换区域

这一切都很好。

然而，我现在想在视图切换时进行动画处理。钩入 didInsertElement 用于动画显示该区域，但是我不能在 willDestroyElement 中执行相同操作，因为元素是一旦该函数返回，在动画有机会运行之前就将其移除。

  App.ToggleContents = Ember.View.extend （{
 
 //这工作正常
 didInsertElement：function（）{
 this。$（）。hide（）。show（slow）; 
 }，
 
 //这不工作
 willDestroyElement：function（）{
 this。$（）。hide（slow，function（）{
 //动画完成，通知元素可以被删除
}）; 
} 
}）; 
  

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

这是一个互动示例的小提琴： http： //jsfiddle.net/rlivsey/RxxPU/

解决方案

您可以创建一个 hide 函数在您的视图上，当回调完成时会删除视图，请参阅 http：// jsfiddle。 net / 7EuSC /

Handlebars ：

 < script type =text / x-handlebarsdata-template-name =tmpl> 
< button {{actionhide}}> hide< / button> 
 
这是我的测试视图，它被淡入淡出
< / script> 
  

JavaScript ：

  Ember.View.create（{
 templateName：'tmpl'，
 
 didInsertElement：function（）{
 this。$（）。hide（）。show（slow）; 
}，
 
 _hideViewChanged：function（）{
 if（this.get（'hideView'））{
 this.hide（）; 
} 
}。观察（'hideView'），
 
 hide：function（）{
 var that = this; 
 this $（）hide（slow，function（） 
 that.remove（）; 
}）; 
} 
}）。append（）; 
  

Say I have a template which displays a view based on a property:

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

This area is toggled by any number of other parts of the UI by setting App.set("contentsAreVisible", [true/false]);

This all works fine.

However, I now want to animate when the view is toggled. Hooking into didInsertElement works to animate showing the area, but I can't do the same in willDestroyElement because the element is removed as soon as that function returns, before the animation has a chance to run.

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
        });
    }
});

Is there any way to tell the view to defer removing the element from the DOM until the animation is complete?

Here's a fiddle with an interactive example: http://jsfiddle.net/rlivsey/RxxPU/

解决方案

You could create a hide function on your view which removes the view when the callback is finished, see http://jsfiddle.net/7EuSC/

Handlebars:

<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();​

这篇关于推迟删除视图，使其可以动画化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！