25

有人找到动画状态转换的好方法了吗？

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

4

6 回答 6

10

Billy's Billing 刚刚发布了一个支持动画转换的Ember 模块。

于 2013-04-09T23:01:08.193 回答
7

我知道这已经很老了，但今天这个特定于上下文的动画的最佳解决方案可能是ember liquid fire。

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

export default function(){
  this.transition(
    this.fromRoute('people.index'),
    this.toRoute('people.detail'),
    this.use('toLeft'),
    this.reverse('toRight')
  );
};
于 2015-03-10T20:42:44.867 回答
7

我将扩展 Lesyk 的答案。如果您需要以 DRY 方式将其应用于多个视图，您可以创建一个自定义类，如下所示：

App.CrossfadeView = {
  didInsertElement: function(){
    //called on creation
    this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
    //called on destruction
    this.$().slideDown(250);
  }
};

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

App.IndexView = Ember.View.extend(App.CrossfadeView);
App.PostView = Ember.View.extend(App.CrossfadeView);
于 2013-07-05T09:41:56.653 回答
6

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

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

将linkTo更改为一个动作

{{#linkTo "todos"}}<button>Todos</button>{{/linkTo}}

变成...

<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>

在当前控制器中为 goToTodos 创建方法

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');

            });

    }
});

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

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

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

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

    }
});

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

于 2013-07-10T07:32:34.623 回答
4

我找到了另一个在视图中实现动画的插入式解决方案：ember-animate

例子：

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);
    }
}

Demo：作者的个人网站

于 2014-02-06T09:35:46.247 回答
1 
App.SomeView = Ember.View.extend({
  didInsertElement: function(){
   //called on creation
   this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
   //called on destruction
   this.$().slideDown(250)
  }
});
于 2013-01-25T17:42:34.253 回答