推迟删除视图以便可以对其进行动画处理 [英] Deferring removal of a view so it can be animated

问题描述

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

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

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

通过设置App.set("contentsAreVisible", [true/false]);

这一切正常.

但是，我现在想在切换视图时设置动画.连接到 didInsertElement 可以动画显示该区域，但我不能在 willDestroyElement 中做同样的事情，因为一旦该函数返回，元素就会被删除，在动画开始之前有机会跑.

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

有什么方法可以让视图推迟从 DOM 中移除元素，直到动画完成?

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

这是一个带有交互式示例的小提琴:http://jsfiddle.net/rlivsey/RxxPU/

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

推荐答案

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

You could create a hide function on your view which removes the view when the callback is finished, see 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();​

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