Question

我实际上是想用 Blaze 在我的应用上下文中播放动画的好方法。

为了更明确，我写了这个超级简单的例子：

<template name="global">
    <h1>Hi guys!</h1>
    {{> foo}}
</template>

<template name="foo">
    <h2>I'm a foo!</h2>
    <ul>
    {{#each elements}}
        {{> bar}}
    }}
    </ul>

    <button name="btnAdd">Add new elem</button>
    <button name="btnDel">Delete an elem</button>
</template>

<template name="bar">
    <li>{{name}}</li>
</template>

假设我们有一个铁路由器路由，它会呈现global模板。在这个特定的渲染上（来自＆＃34;导航＆＃34;）我希望每个模板都使用fadeIn进行渲染。

单击btnAdd按钮时，会创建一个新元素。我希望它会以SlideInLeft效果呈现。

单击btnDel按钮时，会删除一个元素。我希望它会被SlideOutRight效果破坏。

当用户导航到另一条路线时，我希望所有模板都以fadeOut效果消失。

到目前为止，我的每一次尝试都不允许我做这种区分......我找不到任何解决这个问题的方法。

我实际上只是通过添加/删除 Animate.css 类来播放动画（非常简单易用且外观漂亮！）

要恢复，我想根据渲染的来源播放不同的动画。

有人已经面临这个问题吗？

奖金问题：您知道如何链接动画，例如：

使用淡入淡出效果渲染全局＆gt;＆gt;然后＆gt;＆gt;使用rotateIn Effect＆gt;＆gt;渲染foo然后＆gt;＆gt;使用bounceIn效果渲染每个栏

Answer 1

对于时间安排，您可以使用Meteor.setInterval。例如，您可以在$('.elementClass').hide('fast')之外setInterval进行操作。它将首先运行，setInterval将在您需要时运行。

对于初始效果，您可以使用：

Template.templateName.onRendered(function(){
    $('.elementClass').fadeIn('fast') //note that element is initially hidden (display:none in CSS). you can use effects from jquery and jquery-ui for more effects. You have to add jquery-ui additionally
})

您还可以在router.js中使用jQuery，使用iron：router。

Router.route('/the-url', function() {
    this.render('templateName', {
        data: function () {
            $('.htmlElement').toggle('slide', {direction:'right'}, 200); //note that the element is initially invisible
        }
    });
}, {
     name: 'routeName'
});

在Blaze上使用复杂的动画

1 个答案: