有一个很好的library但我只能用它来转换列表。 (我可能做错了吗?)
但是,我想在计数器递增时翻转它。我提出的解决方案对我来说真的很难看。我从 :
//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>
非动画版
//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>
我对 meteor universe 很陌生,但我仍然想知道是否有任何适当的方法来为简单的响应式(Reactive)变化设置动画
最佳答案
Meteor 确实提供了 _uihook
来为删除或添加的 DOM 元素设置动画
您可以在 Github 上找到示例
以下是另一个在 domElement
中添加或删除元素时启用淡入/淡出 动画的示例
domElement._uihooks = {
insertElement: function(node, next) {
$(node)
.hide()
.insertBefore(next)
.fadeIn();
},
removeElement: function(node) {
$(node).fadeOut(function() {
$(this).remove();
});
}
}
关于javascript - 在 Meteor 中为模板制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34273736/