我可以在emberjs中给视图显示动画 [英] Can i give the view a show up animation in emberjs

问题描述

以下是使用emberjs路由器 http://jsbin.com/agameq/edit 的示例。
现在我想有一些showup动画，如fadeIn或fadeOut，当路由更改。我应该怎么办？

Here is a example using emberjs router http://jsbin.com/agameq/edit. Now I wanna have some showup animation, like fadeIn or fadeOut, when route changed. what should I do?

推荐答案

每个查看命名为 didInsertElement ：

当视图的元素已插入到DOM。
覆盖此函数以执行任何需要
中的元素的文档正文。

Called when the element of the view has been inserted into the DOM. Override this function to do any set up that requires an element in the document body.

所有ember视图还有一个 $ ，它是对jQuery的引用，因此您可以在视图中包装一些元素，并对其进行任何更改，例如：

All ember views also have a $ which is a reference to jQuery, so you can wrap some element in your view with it and apply any changes to it such as:

// this will animate only the tag h2, which in your case is the title of the users view
App.UsersView = Ember.View.extend({
    templateName: 'users',
    didInsertElement: function() {
        this.$('h2').animate({ fontSize: "3em" }, 900 );
    }   
});

或者你可以调用它没有参数（如 $（））返回由jQuery包装的当前视图。

Or you can call it without arguments (like $()) to return the current view wrapped by jQuery.

要在您在该视图/路线中输入时对视图进行动画处理，请在 App.UsersView 中执行此操作：

To animate a view as you enter in that view/route, do this in your App.UsersView:

// this will animate the entire view
App.UsersView = Ember.View.extend({
    templateName: 'users',
    didInsertElement: function() {
        this.$().animate({ fontSize: "3em" }, 900 );
    }   
});

（注意：我的动画很跛脚，但只是显示在哪里调用方法，做一个真正的动画）

(Note: my animation is pretty lame, but it's just to show where to call the methods, do a real animation)

这是一个修改版本的 您的JSBin

Here's a modified version of your JSBin

这篇关于我可以在emberjs中给视图显示动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！