我使用 react 已经有一段时间了,想试试 Mithril.js。
浏览了文档和示例并喜欢我所看到的,所以我说我应该动手并开始编码!
我有一个简单的 API 调用,它接收 JSON 数据,然后输出ul
包含所有项目的列表。我已经为动画集成了 GSAP TweenMax,我想要实现的非常简单 - 我在加载时淡入所有内容,然后onclick
我想淡入淡出一个元素并将其从 DOM / 数据中删除。
似乎正在发生的事情是元素正在淡出,整个ul
列表正在重新渲染,并且该元素保留在 DOM 中,不透明度为 0:
var Item = {
list: function() {
return m.request({method: 'GET', url: '/api/items'});
}
}
var dm = {
controller: function(data) {
var items = Item.list();
return {
items: items,
remove: function(item) {
items().data.splice(items().data.indexOf(item), 1);
}
}
},
view: function(ctrl) {
return m('ul', [
ctrl.items().data.map(function(item, id){
return m('li',{
key: id,
config: fadesIn,
onclick: fadeOut(ctrl.remove.bind(this, item))
}, item.title);
})
]);
}
}
var fadesIn = function(element){
var tl = new TimelineMax();
tl.from(element, .5, {opacity: 0});
}
var fadeOut = function(callback) {
return function(e) {
m.redraw.strategy('none');
TweenMax.to(e.target, .5, {opacity: 0, onComplete: function() {
m.startComputation();
callback();
m.endComputation();
}});
}
}
m.mount(document.getElementById('test'), dm);
我很新……昨天才开始阅读。