Css Ember.js路由器：如何设置状态转换动画

有人找到一个好方法来动画状态转换吗

---

路由器会立即从DOM中删除视图。问题是我不能推迟到动画结束。注意：我使用的是v1.0.0-pre.4。

Billy的账单刚刚发布了一个支持动画过渡的版本。

我将详细介绍Lesyk的答案。如果需要以干式方式将其应用于多个视图，可以创建如下自定义类：

App.CrossfadeView={
didInsertElement:函数（）{
//呼吁创造
这个$（）.hide（）.fadeIn（400）；
},
元素：函数（）{
//呼吁销毁
此.$（）向下滑动（250）；
}
};

然后在代码中将其应用于各种视图类。因为Ember依赖于jQuery，所以几乎可以使用任何jQuery动画

App.IndexView = Ember.View.extend(App.CrossfadeView);
App.PostView = Ember.View.extend(App.CrossfadeView);

---

在我的应用程序上遇到了相同的要求。尝试过，但没有给出我需要的粒度（特定于元素的动画）

对我有效的解决方案如下--

将链接更改为动作

最后——要在Todos模板上的元素中设置动画，请在视图上使用didInsertElement

App.TodosView = Ember.View.extend({
    didInsertElement: function(){

        // Hide Everything
            this.$().hide();

        // Do Element Specific Animations Here
            $('#something_else').fadeIn(500);

    }
});

---

到目前为止，这是我为特定于元素的过渡动画找到的最优雅的解决方案。如果有更好的，我很乐意听到

我发现了另一个在视图中实现动画的下拉式解决方案：

例如：

App.ExampleView = Ember.View.extend({

    willAnimateIn : function () {
        this.$().css("opacity", 0);
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
    },

    animateOut : function (done) {
        this.$().fadeTo(500, 0, done);
    }
}

---

演示：

我知道这已经很老了，但是现在这个特定于上下文的动画的最佳解决方案可能是

它允许您在转换文件中执行以下操作：

export default function(){
  this.transition(
    this.fromRoute('people.index'),
    this.toRoute('people.detail'),
    this.use('toLeft'),
    this.reverse('toRight')
  );
};

---

你有没有考虑过通过fwiw将过渡类添加到你的视图中？我下面的回答是关于这种情况的最佳实践：）我确实知道这些钩子，但是这些钩子都不能帮助我完成工作。问题是didInsertElement和willDestroyElement是特定于该视图的。要使过渡平滑，我需要知道另一个视图（路由器正在过渡到的视图）是否准备就绪，然后执行动画/过渡，然后重新绘制上一个视图。因此，换句话说，我正在寻找一个更异步的行为。第一个代码段的结尾是错误的，括号不匹配：）也许你可以编辑它。willDestroyElement动画对我不起作用（1.0-rc4）。在动画渲染之前，视图似乎已经消失。你有一个有效的例子吗？这里是一个（未完成的）例子。动画作品tho：请注意，我使用的是rc6 tho，而您正好在括号附近（已在上面修复）。谢谢

fadeIn

确实可以工作，但是

willDestroyElement

中的

slideDown

是不可见的，至少对我来说是这样。如果你正在为单个元素设置动画，你就不是在谈论状态转换。余烬动画插座是为插座，这据说是不同于OP的用例。此外，这些行动打破了应用程序对URL的支持：-（考虑到EmberJS在升级过程中确实像疯了一样波动，任何关于旧帖子的新信息都应该受到欢迎。谢谢！我只是从ember开始。链接页面上说：“需要注意的事情：[……]当使用不同的模型过渡到同一路线时，不会执行动画。这是由于Ember重用同一DOM元素的方式造成的，并且在动画支持在1.1中登陆Ember core之前很可能不会被修复。”所以我的问题-这个答案是最新的吗？emper 2.10对路线设置动画的最佳选项是什么？

App.IndexController = Ember.Controller.extend({
    goToTodos: function(){

        // Get Current 'this' (for lack of a better solution, as it's late)
            var holdThis = this;

        // Do Element Specific Animation Here
            $('#something').hide(500, function(){

                // Transition to New Template
                    holdThis.transitionToRoute('todos');

            });

    }
});

App.TodosView = Ember.View.extend({
    didInsertElement: function(){

        // Hide Everything
            this.$().hide();

        // Do Element Specific Animations Here
            $('#something_else').fadeIn(500);

    }
});

App.ExampleView = Ember.View.extend({

    willAnimateIn : function () {
        this.$().css("opacity", 0);
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
    },

    animateOut : function (done) {
        this.$().fadeTo(500, 0, done);
    }
}

export default function(){
  this.transition(
    this.fromRoute('people.index'),
    this.toRoute('people.detail'),
    this.use('toLeft'),
    this.reverse('toRight')
  );
};