注意:
1.通过v-for遍历多个元素时,不用transition而用transition-group包裹。同时,需要定义key属性。
2.注意一下边框的虚线效果,以前没注意。以及退场时,套用的两段代码,以后理解。
3.transition-group还要两个属性,appear属性指定整体的列表渲染时的动画,tag="ul"为渲染transition-group时不当作<span>
标签(不符合规范),而是渲染成tag属性指定的标签类型。
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<style>
li{
border: 1px dashed #777777;
/*dashed表示虚线*/
border-radius: 3px;
margin: 5px;
line-height: 150%;