Javascript 在视图中指定动画效果

考虑这样一个代码（可在以下网址获得）：

//js代码
var视图模型={
不透明度：0
};
var-ractive=new-ractive（{el:'root'，模板：'#rootTemplate'，数据：viewModel，magic:true，lazy:true}）；
在（'click'，function（）{
设置（“不透明度”，0.0）；
动画（“不透明度”，1.0，{持续时间：1000}）；
});

这很有效。但请注意，在js端（视图模型），我指定的值应该是视图的一部分，而不是视图模型：首先，任何东西都应该设置动画，其次，持续时间应该是1秒。在视图模型方面，我希望只有一个布尔变量会在视图方面变成动画。或触发将触发动画的事件。但是，视图模型当然不应该知道会有任何动画

---

那么如何正确地使用ractivejs呢？如果使用knockoutjs，我会使用自定义绑定来完成任务。

很久以前就注意到了这个问题。在本例中，您可以从模板运行动画（请参见）：

对于更复杂的用途，可以考虑使用自定义事件或装饰器将代码与控制器/视图模型分离

<!-- html code -->
<script type="text/ractive" id="rootTemplate">
    <div style="background-color: rgba(0, 128, 0, {{opacity}});width: 100px; height: 100px;">
    </div>
    <input type="button" value="Click me!" on-click="click"/>
</script>

<div id="root">
</div>

//js code
var viewModel={
    opacity: 0
};

var ractive = new Ractive({ el: 'root', template: '#rootTemplate', data: viewModel, magic: true, lazy: true });
ractive.on('click', function(){
    ractive.set("opacity", 0.0);
    ractive.animate("opacity", 1.0, {duration: 1000});
});

<div style="background-color: rgba(0, 128, 0, {{opacity}});width: 100px; height: 100px;">
</div>

<input type="button" value="Click me!" 
       on-click="animate('opacity', 1, { duration: 1000 })">