Animate a template in Meteor
There's a good library but I could use it to transition lists only. (I might be doing wrong ?)
However, I wanted to flip a counter whenever it was incremented. The solution I came with looks really ugly to me. I went from :
//counter.js
Template.counter.helpers({
counter: function () {
return Counts.get('counter');
}
});
//counter.html
<template name="counter">
<div class="ui clearing counterBlock">
<h1 class="ui header centered">Contacts</h1>
<h2 class="counter ui header centered">{{ counter }}</h2>
</div>
</template>
for the non animated version to
//counter.js
var prevCounter = 0, counterTpl;
Template.counterBlock.onRendered(function () {
counterTpl = Blaze.render(Template.counter, $(".counter")[0]);
});
Template.counter.helpers({
counter: function () {
var c = Counts.get('counter');
if (c != prevCounter) {
$(".counter .animated").removeClass('flipInX').addClass('flipOutX');
Meteor.setTimeout(function () {
prevCounter = c;
Blaze.remove(counterTpl);
counterTpl = Blaze.render(Template.counter, $(".counter")[0]);
}, 1000);
}
return prevCounter;
}
});
//counter.html
<template name="counterBlock">
<div class="ui clearing counterBlock">
<h1 class="ui header centered">Contacts</h1>
<h2 class="counter ui header centered">
</h2>
</div>
</template>
<template name="counter">
<span class="animated flipInX">{{counter}}</span>
</template>
I'm quite new to meteor universe but I'm still wondering if there's any proper way to animate a simple reactive change
Meteor do provided _uihook
to animate DOM element which is removed or added
Theres are examples you can find on Github
Following are another example which enabled the fade-in/out animation when elements are added or removed from domElement
domElement._uihooks = {
insertElement: function(node, next) {
$(node)
.hide()
.insertBefore(next)
.fadeIn();
},
removeElement: function(node) {
$(node).fadeOut(function() {
$(this).remove();
});
}
}
链接地址: http://www.djcxy.com/p/84238.html
上一篇: 流星中的菜单动画
下一篇: 在流星中为模板制作动画