VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active

本例要结合过渡动画四个过程的示意图一起理解。

https://cn.vuejs.org/v2/guide/transitions.html

疑问：

v-for="(item,i) in list" del(i) 传参不传id，改成i ，这个是什么用法？

  <style>
  li{
    border: 1px dashed #999;
    margin: 5px;
    padding: 5px;
    line-height: 25px;
    font-size: 12px;
    width: 800px;
  }
  li:hover{
    background-color: hotpink;
    transition: all 0.8s ease;
  }
  .v-enter,.v-leave-to {
    /* .v-enter, .v-leave-to 设置的过渡样式
    自动赋给transition 或 transitiongroup标签了 */
    opacity: 0;
    transform: translateY(80px);
  }
  .v-enter-active, .v-leave-active {
    /* .v-enter-active, .v-leave-active 设置的过渡样式
    自动赋给transition 或 transitiongroup标签了 */
    transition: all 0.6s ease;
  }
  .v-move{ 
    transition: all 0.6s ease;
  }
  /* v-move 特性。会在元素的改变定位的过程中应用。
       比如列表中有元素被删除,其他元素会上移
       设置了v-move就会在这起作用. */

  .v-leave-active{
    position: absolute;
    /* 当元素设置了  absolute  后，默认就不是100%的宽度了，而是内容多宽就是多宽
       所以要给li元素设置一下宽度. */
  }
  /* 用splice删除数组的元素，由于删除的元素经历了一个过渡，始终占据文档流的这个位置，
  因此下一个元素要等待其过渡消失后再移动过来，造成一个生硬的效果。

  要达到平滑过渡，就要在删除元素leave-active阶段,
  用position:absolute 让删除的元素脱离文档流，后面的元素才能同时平滑过渡过来。
 */
  </style>
</head>
<body>
  <div id="app">
    ID:<input type="text" v-model="id">
    NAME:<input type="text" v-model="name">
    <input type="button" value="添加" @click="add()">

    <!-- 通过 appear 特性设置节点的在初始渲染的过渡
         也就是页面刚加载的时候，实现过渡动画 -->
    <transition-group tag="ul" appear>
      <li v-for="(item,i) in list" @click="del(i)" :key="item.id">
          <!-- v-for="(item,i) in list"  
           del(i)   传参不传id，改成i    ??? 这个是什么用法-->
          {{item.id}} --- {{item.name}}
      </li>
    </transition-group>
  </div>

  <script>
  var vm = new Vue({
    el:'#app',
    data:{
      id:'',
      name:'',
      list:[
        {id:1, name:'赵高'},  // list里用到的id name 等，要先定义在data
        {id:2, name:'秦桧'},
        {id:3, name:'严嵩'},
        {id:4, name:'魏忠贤'}
      ]
    },
    methods:{
      add(el){
        this.list.push({id:this.id, name:this.name});
        this.id = this.name = '';
      },
      del(i){
        this.list.splice(i,1); // i 的用法？？
      },
    },
  });
  </script>
</body>

VUE笔记 - 列表过渡动画 v-enter, v-leave-to | v-enter-active, v-leave-active | v-move

猜你喜欢