zoukankan      html  css  js  c++  java
  • Day3.6列表动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>动画</title>
    <script src="../lib/js/vue.js"></script>
    <style>
    li{
    border: 1px dashed black;
    margin: 5px;
    line-height: 35px;
    padding-left: 5px;
    font-size: 12px;
    }
    li:hover{
    background-color: #1b6d85;
    transition: all 0.5s;
    }
    .v-enter,
    .v-leave-to{
    opacity: 0;
    transform: translateY(80px);
    }
    .v-enter-active,
    .v-leave-active{
    transition: all 0.8s linear;
    }
    /* .v-move 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地飘上来的效果*/
    .v-move{
    transition: all 0.5s linear;
    }
    .v-leave-active{
    position: absolute;
    }
    </style>
    </head>
    <body>
    <div id="app">
    <div>
    <label>
    ID:
    <input type="text" v-model="id">
    </label>
    <label>
    NAME:
    <input type="text" v-model="name">
    </label>
    <input type="button" value="ADD" @click="add">
    </div>
    <ul>
    <!-- 在实现列表动画的时候,如果需要过渡的元素是通过 v-for 循环渲染出来的
    不能使用transition 包裹,要使用 transition-group -->
    <!-- 给 transition-group 添加 appear 属性,实现列表刚展示出时的效果 -->
    <!-- 通过为 transition-group 元素设置tag 属性,指定transition-group渲染为指定的元素,如果不指定 tag 属性 默认渲染为span 标签-->
    <transition-group appear tag="ul">
    <!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个元素 设置 :key 属性 -->
    <!-- 根据索引删除-->
    <li v-for="(item,i) in list" :key="item.id" @click="remove(i)">
    {{ item.id }} - - - {{ item.name }}
    </li>
    </transition-group>
    </ul>
    </div>
    <script>
    const vm = new Vue({
    el:'#app',
    data:{
    id:'',
    name:'',
    list:[
    {id:1,name:'秦始皇'},
    {id:2,name:'刘邦'},
    {id:3,name:'项羽'},
    {id:4,name:'赵高'}
    ]
    },
    methods:{
    add(){
    this.list.push({ id:this.id,name:this.name })
    this.id = this.name = ''
    },
    //传索引删除
    remove(i){
    this.list.splice(i,1)
    }
    }
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    HTML5服务器发送事件(Server-Send Events)
    无人问津的排序(一)----希尔排序
    NB二人组(二)----归并排序
    40、常用字符串格式化有哪几种?
    39、请用代码简答实现stack
    38、一行代码实现删除列表中重复的值 ?
    37、如何在函数中设置一个全局变量 ?
    NB二人组(一)----堆排序
    快排
    LOW逼三人组(三)----插入排序
  • 原文地址:https://www.cnblogs.com/zhaohui-116/p/12057274.html
Copyright © 2011-2022 走看看