javascript - Deferring removal of a view so it can be animated - Stack Overflow

admin管理员组

文章数量:1391934

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 plete, 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 plete?

Here's a fiddle with an interactive example: /

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 plete, 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 plete?

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

• javascript
• jquery
• ember.js

Share Improve this question Follow edited Mar 29, 2012 at 13:06 Adrien Schuler 2,42511 gold badge2222 silver badges3232 bronze badges asked Mar 29, 2012 at 12:20 rlivseyrlivsey 2,13422 gold badges1818 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

I know this already has the right answer, but I thought I'd pop something similar up in case anyone else finds this through Google like I did.

One of my apps has a 'detail' section that always has the same content binding but changes the template for view/edit/etc modes.

Because I'm using rerender() to achieve this and want the view to fade out then in again so it hides any glitchiness of the rerender function (as well as make it look nice) I have wrapped it in a for animation purposes.

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

and

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

Perhaps not the best option, but also perhaps useful to someone

本文标签： javascriptDeferring removal of a view so it can be animatedStack Overflow