在Blaze上处理复杂的动画

我实际上正在寻找一种在我的应用上下文中播放动画的好方法，使用Blaze。在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模板的铁路由器路线。在这个特定的渲染（从“导航”），我希望每个模板呈现fadeIn。

点击btnAdd按钮，创建一个新元素。我希望它会呈现与SlideInLeft的效果。

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

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

到目前为止，我的每一次尝试都不会让我做这种区分...我找不到解决此问题的任何包。

我其实只是添加/删除Animate.css类播放动画（使用非常简单，好看！）

要恢复，我希望有一个不同的播放的动画视的来源渲染。

有人已经遇到过这个问题吗？

奖金的问题：你知道链如何动画，如：

使全球与淡入效果>>然后>>渲染rotateIn影响FOO >>然后>>渲染bounceIn效果

每栏

来源

2016-04-21 Julien Leray

你已经看到了吗？ https://github.com/webtempest/meteor-animate – Kalman

@Kalman：是的，这并不能解决问题，它不允许在不同的上下文中选择动画，它只会在每次绑定元素被渲染时播放 –

对于计时，您可以使用Meteor.setInterval。例如，您可以在setInterval之外执行$('.elementClass').hide('fast')。它将首先运行，并且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，使用铁：路由器。

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

来源

2016-04-26 03:29:45 Luna

Yep这个答案是对奖金问题的回答（我知道我可以用setInterval来完成，但也许可以用其他方式来完成））。无论如何，谢谢，但这并不能解决主要问题... –

@JulienLeray我认为它确实如此。你可以用onRendered添加任何你想要的效果，或者你可以在你的路线中使用jQuery。另外，你可以通过事件做任何你想要的效果。例如，您单击，它会产生所需的效果，然后删除文档。 – Luna

如果您不知道如何编写它，请告诉我，我将编辑我的问题。 – Luna

在Blaze上处理复杂的动画

回答

相关问题