在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效果
每栏
答
对于计时,您可以使用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'
});
你已经看到了吗? https://github.com/webtempest/meteor-animate – Kalman
@Kalman:是的,这并不能解决问题,它不允许在不同的上下文中选择动画,它只会在每次绑定元素被渲染时播放 –