我可以在 emberjs 中给视图显示动画吗

Posted 2023-02-26

【中文标题】我可以在 emberjs 中给视图显示动画吗

【英文标题】：Can i give the view a show up animation in emberjs

【发布时间】：2012-07-07 17:33:37

【问题描述】：

这是一个使用 emberjs 路由器 http://jsbin.com/agameq/edit 的示例。 现在我想要一些显示动画，比如当路由改变时，fadeIn 或fadeOut。我该怎么办？

【问题讨论】：

我最近添加了一个project in GitHub作为我自己的学习过程，你可能想看看（它仍然很粗糙，但我会随着我的进步而更新）

@MilkyWayJoe 好的，我会的~谢谢~

【参考方案1】：

ember 中的每个View 都有一个名为didInsertElement 的方法：

当视图的元素被插入到 DOM 时调用。 覆盖此函数以执行任何需要其中元素的设置 文档正文。

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

// 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包裹的当前视图。

要在您进入该视图/路线时为该视图设置动画，请在您的 App.UsersView 中执行此操作：

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

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

这是your JSBin的修改版

【讨论】：

谢谢。很有意思。我不知道 Ember 实现了受 Cocoa 启发的 didInsertElement。您的示例是否使用 jQuery.animate 函数？意思是来自 Ember 的 didInsertElement，然后将其传递给 jQuery 以获取 UX 的东西，对吧？

@nembleton 是的，当时我正在调用 jQuery animate 函数，因为 Ember 已经将它提供给它的视图，你所需要的只是对 jQuery 的脚本引用跨度>

非常感谢。你的回答解决了我的大问题。我想使用 emberjs 做一些 webapp，而 ux 对此非常重要。但是现在的动画是用jQuery的，能不能把动画换成css3的花样？

我不知道 如何 可以用 CSS3 替换 jQ 动画，因为我不太熟悉 CSS3 过渡/等或如何正确应用它们。还在学习一堆东西:)

好的，我还有一个问题......例如，我在控制器中有一个函数load，它将从服务器加载数据。现在我希望视图在数据加载完成时有一个fadeIn 动画。我想在load这样的this.get('view').fadeIn()函数中获取控制器的view，如何获取参考？

【参考方案2】：

根据@MilkyWayJoe 的回答，您可能希望在插入视图之前隐藏视图，方法是将isVisible 属性设置为false：

App.UsersView = Ember.View.extend(
    templateName: 'users',

    isVisible: false,

    didInsertElement: function() 
        var self = this;
        this.$().fadeIn(700, function()
            self.set('isVisible', true);  //inform observers of `isVisible`
        );
       
);

或者使用this animation Mixin，它允许您通过更改一组观察到的 CSS 属性来为视图设置动画：

App.UsersView = Ember.View.extend( JQ.Animate, 
    templateName: 'users',

    isVisible: false,

    // Observed CSS properties
    cssProperties: ['display'],

    // Optional animation properties
    duration: 700,
    easing: 'easeInOutCubic', 

    didInsertElement: function() 
        this.set('display', 'block'); 
    ,

    afterAnimate: function() 
        this.set('isVisible', true);
       
);

【讨论】：

哦，太好了。我会阅读这篇文章并尝试一下。如何通过阅读源代码了解这些信息？

找到的源代码here（这是最新的）拥有所有的cmets，而documentation尚未完全更新（因为大部分工作都集中在@ 987654324@)。我也建议Google for "Ember Gist"，你会得到一些很棒的资源。

嗨，我如何访问控制器中的 dom 元素...例如，我在控制器中加载了一些元素，我需要调整元素父级的宽度。如何获取父 dom 并在控制器中设置其宽度？