zoukankan      html  css  js  c++  java
  • vue中列表的过渡

    <style>
      .v-enter,.v-leave-to{
        opacity: 0;
      }
      .v-enter-active,.v-leave-active{
        transition: opacity 1s;
      }
    </style>
    <div id='app'>
      <transition-group>
        <div v-for="item of list" :key='item.id'>
          {{item.title}}
        </div>
      </transition-group>
      <button @click='handleClick'>Add</button>
    </div>
    
    <script>
    var count = 0;
    var vm = new Vue({
      el:'#app',
      data:{
        list:[]
      },
      methods:{
        handleClick:function(){
          this.list.push({
            id: ++count,
            title:'hello world'
          })
        }
      }
    })
    </script>
    列表的过渡动画主要由这个标签transition-group实现,他的原理就是,每次增加一个div,就会包裹一层transition,代码是这样
    <transition>
      <div>hello world</div>
    </transition>
    <transition>
      <div>hello world</div>
    </transition>
    <transition>
      <div>hello world</div>
    </transition>
    <transition>
      <div>hello world</div>
    </transition>
    <transition>
      <div>hello world</div>
    </transition>
    add一下,加一个transition,然后会自动加上对应的class,v-enter,v-leave-to,v-enter-active,v-leave-active
  • 相关阅读:
    Xshell相关优化
    Inotify+rsync远程实时同步
    MySQL主从复制故障解决
    Docker部署centos7容器
    Salt-ssh批量部署minion
    MySQL数据库二
    防火墙2
    MySQl数据库
    防火墙
    http原理2
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9704689.html
Copyright © 2011-2022 走看看