Javascript v-for循环（Vue.JS）中每个元素的动画

我使用VueJS制作了一个简单的todo应用程序。 我还添加了vue2 animate（animate.css的Vue.js 2.0端口，用于Vue的内置转换） 添加一个元素的动画可以正常工作

但有两个问题我想在不进行不必要编码的情况下解决：

从本地存储下载的文件列表的动画显示 同时适用于所有项目。我需要动画来工作 按顺序分别为每个项目分配

删除项目的动画无法正常工作-最后一个 项目总是被移除，然后轮班

注意：看看JSFIDLE中的演示，因为localstorage在这么多代码段中不起作用

Vue.component（“加法器”{
数据：函数（）{
返回{
任务：“
};
},
模板：`
+
`,
方法：{
添加：函数（）{
此.$emit（“addtodo”{
标题：此任务，
完成：错误
});
此项任务=”；
}
}
});
Vue.component（“todo”{
道具：[“物品”]，
模板：`
`,
方法：{
del:function（）{
本.$emit（“deletetodo”）；
}
}
});
Vue.component（“TODO”{
道具：[“道具”]，
模板：`
`,
方法：{
delTodo:函数（i）{
该.$emit（“deletetodo”，i）；
}
}
});
Vue.config.devtools=true；
让应用程序=新Vue({
el:“托多普先生”，
数据：{
标题：“待办事项应用程序”，
项目：[]
},
方法：{
addTodo:函数（e）{
本.项.推（e）；
},
delTodo:函数（i）{
this.items=this.items.filter（e=>e！=i）；
}
},
安装的（）{
if（localStorage.items）{
this.items=JSON.parse（localStorage.getItem（“items”）；
}
},
观察：{
项目：{
处理程序（val）{
setItem（“items”，JSON.stringify（this.items））；
},
深：是的
}
}
});
.done>标签{
文字装饰：线条贯通；
}
.任务{
左侧填充：36px；
}

待办事项应用程序


{{title}}
好，一次取一个：

mounted() {
    // Get your items and set all to hidden
    if (localStorage.items) {
        this.items = JSON.parse(localStorage.getItem("items"))
                     .map(item => item.isVisible = false);
    }

    // Loop through and show the tasks
    for(let i=1; i<=this.items.length; i++){
        // Where 300 is milliseconds to delay
        let delay = i * 300;

        setTimeout(function(){
            this.items[i].isVisible = true;
        }.bind(this), delay);
    }
},

删除任务
它似乎总是最后一个被删除的任务，这是因为您通过
索引键入列表项。替换
delTodo
方法中的整个
items
数组时，该方法会为列表中的每个项目提供一个新数组，其中包含新键。按
项
键，您将得到正确的结果：

<todo v-for="(item, index) in items" :key="item" :item.sync="item" v-on:deletetodo="delTodo(item)"></todo>

在这里，我们将通过在每个任务上切换
isVisible
来显示/隐藏

这意味着当您最初从本地存储加载任务时，可以将它们全部设置为
isVisible:false
，然后在
for
循环中使用
setTimeout
，一次显示所有任务：

mounted() {
    // Get your items and set all to hidden
    if (localStorage.items) {
        this.items = JSON.parse(localStorage.getItem("items"))
                     .map(item => item.isVisible = false);
    }

    // Loop through and show the tasks
    for(let i=1; i<=this.items.length; i++){
        // Where 300 is milliseconds to delay
        let delay = i * 300;

        setTimeout(function(){
            this.items[i].isVisible = true;
        }.bind(this), delay);
    }
},

mounted（）{
//获取您的项目并将所有设置为隐藏
if（localStorage.items）{
this.items=JSON.parse（localStorage.getItem（“items”））
.map（item=>item.isVisible=false）；
}
//循环并显示任务
对于（假设i=1；i最重要的是，对项目阵列进行分阶段添加：

  mounted() {
    let items = [];
    if (localStorage.items) {
      items = JSON.parse(localStorage.getItem("items"))
    }
    for (let i = 0; i < items.length; i++) {
      let delay = i * 1000;
      setTimeout(
        function() {
          this.items.push(items[i])
        }.bind(this),
        delay
      )
    }
  }

mounted（）{
设项目=[]；
if（localStorage.items）{
items=JSON.parse（localStorage.getItem（“items”））
}
for（设i=0；i
为了增加对话内容，以下内容在Vuex的操作中实现了惊人的效果，并使用了胖箭头语法：

异步获取存储库（{commit}）{
const response=wait gitHubApi.get（'/users/rodolphocastro/repos'）//使用Axios调用API
常量：存储库[]=[]
response.data.forEach（（r，i）=>{
const delay=i*300//300m->等待数组中每个项目的时间
设置超时（（）=>{
交错推进（r）
提交（'setRepositories'，交错）
}，延误）
})
}
您可以对该函数使用箭头符号，而不必将其绑定到您的函数。（=>this.items.push（items[i]）此符号保留“this”（或者应该保留）。我遇到过一些奇怪的情况，但它没有）