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

问题描述

目前没有办法在Ember中延迟视图的破坏。
当您要在销毁该视图之前制作动画时，会出现问题。

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

  willDestroyElement： - > 
 $ clone = @ $（）。clone（）。addClassanimate-destruction
 @ $（）。parents（'：first'）。prepend $ clone 
 setTimeout  - > 
 $ clone.off（）。remove（）
，350 
  

注意：在css中的 .animate-destruction 类中完成动画。

我知道我的方法不好我想知道有没有人想出一个更好的方法。

解决方案

尝试这个

  Ember.Route.extend（{
 actions：{
 willTransition：function（transition）{
 $ .each（Ember。查看视图，函数（索引，值）{
 var popUpView = value.get（'classNames'）。find（function（item）{
 return item =='[nameofyourclass]'; 
 $ b 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']，
 
可见：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）; 
}）; 
}，
}）; 
  

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

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.

解决方案

Try this

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屋！