Animated view transitions. How to delay the deletion or insert an item?

Question

I am trying to make some animated transitions between connecting different points. I know that there are methods like willInsertElement , didInsertElement or willDestroyElement of the View class, which you can override, but you cannot delay adding or, especially, deleting an element. I tried to override other methods, but looking at a class is hard to understand how it works. I came up with some idea:

Jsfiddle example

  AnimationHelper = Ember.Object.extend({ isPreviousViewFadedOut:false, nextViewToFadeIn:null, triggerManually: true, setNextViewToFadeIn:function (view) { if (this.nextViewToFadeIn) { if (this.hasObserverFor('isPreviousViewFadedOut')) { this.removeObserver('isPreviousViewFadedOut', this.nextViewToFadeIn, 'fadeInCallback'); } } this.nextViewToFadeIn = view; this.addObserver('isPreviousViewFadedOut', this.nextViewToFadeIn, 'fadeInCallback'); } }); AnimatedView = Ember.View.extend({ didInsertElement:function () { this.$().hide(); if (AnimatedView.aHelper.get('triggerManually')) { AnimatedView.aHelper.set('isPreviousViewFadedOut', true); this.fadeInCallback(); //next time we don't want call fadeInCallback manually AnimatedView.aHelper.set('triggerManually', false); } else { AnimatedView.aHelper.setNextViewToFadeIn(this); } }, fadeInCallback:function () { if (AnimatedView.aHelper.get('isPreviousViewFadedOut')) { this.$().fadeIn(1000); } }, willDestroyElement:function () { AnimatedView.aHelper.set('isPreviousViewFadedOut', false); var clone = this.$().clone(); this.$().replaceWith(clone); var that = this; clone.fadeOut(1000, function () { $(this).remove(); if (AnimatedView.aHelper.nextViewToFadeIn == that) { AnimatedView.aHelper.removeObserver('isPreviousViewFadedOut', AnimatedView.aHelper.nextViewToFadeIn, 'fadeInCallback'); } else { AnimatedView.aHelper.set('isPreviousViewFadedOut', true); } }); } }) AnimatedView.reopenClass({ aHelper:new AnimationHelper() }) 

Everything seems to be fine, but it's probably a very bad design. Is there a better way to achieve this effect? or maybe I'm completely wrong and should look at the problem from very different points of view? for example, make an animation inside the View that wraps another view, etc.

Answer 1

Some time ago, there was a transfer request that was combined with a wizard that added additional bindings to Em.ContainerView that would allow an async transition between two views in the outlet, but this change was canceled shortly after, it caused errors and not very The approach that allows transitions between the two types of output is well discussed.

Recently, the Ember core group has focused on simplifying the binding of application views to the router through one-time exit points, and such a system does not really simplify the work of what you are trying to do. Almost certainly, if these transitions are valuable to you, you will want to not use the outputs at all, and instead manually create / add / animate views yourself when entering and exiting states. Perhaps the Ember core will at some point consider this issue again, but I would not have expected this before the upcoming release of version 1.0.

I really believe that the recently published Yapp application built in Ember took a state approach for each individual transition between each landing state and did not use outlet at all. An application created by some smart people does a great job of this, so it definitely seems to him that he needs to support it.

Answer 2

They can also help a lot:

http://discuss.emberjs.com/t/animation-support-in-ember-1-1/1977

https://github.com/billysbilling/ember-animated-outlet

If you could choose an answer that would be really useful for reducing the number of unanswered questions on Ember.