在 Emberjs 中销毁之前的动画视图 [英] Animating views before destruction in Emberjs

问题描述

目前没有办法在 Ember 中延迟视图销毁.当您想在销毁视图之前为其设置动画时，这会带来一个问题.

There is currently no way to delay view destruction in Ember. This presents a problem when you want to animate the view before destroying it.

所以，我目前有一个非常丑陋的解决方法:

So, I currently have this extremely ugly workaround:

willDestroyElement: ->
  $clone = @$().clone().addClass "animate-destruction"
  @$().parents(':first').prepend $clone
  setTimeout ->
    $clone.off().remove()
  , 350

注意:动画是在css中的.animate-destruction类中完成的.

Note: animation is done in the .animate-destruction class in css.

我知道我的方法很糟糕，所以我想知道是否有人想出了更好的方法.

I know my method is bad, so I'm wondering if anyone has come up with a better way.

推荐答案

试试这个

Ember.Route.extend({
actions: {
willTransition: function(transition) {
        $.each(Ember.View.views, function(index, value) {
            var popUpView = value.get('classNames').find(function(item) {
                return item == '[nameofyourclass]';
            });
            if(!Em.isEmpty(popUpView) && value.get('visible')) {
                value.set('visible', false);
                value.get('controller').set('previousTransition', transition);
                transition.abort();
            }
        });
        return true;
},
 }
    });

Ember.View.extend({
classNames: ['nameofyourclass'],
classNameBindings: ['visible:element-visible'],

visible: false,

didInsertElement: function() {
    var t = this,
            controller = this.get('controller');
    this.$()
    .on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
        if(!t.get('visible')) {
            var previousTransition = controller.get('previousTransition');
            if(!Em.isEmpty(previousTransition)) {
                controller.set('previousTransition', null);
                previousTransition.retry();
            } else { // fallback
                controller.transitionToRoute('index');
            }
        }
    });
    Em.run.next(this, function() {
        this.set('visible', true);
    });
},
});

这篇关于在 Emberjs 中销毁之前的动画视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！