vue 动画例子

2022-04-01 18:04:07 作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- <script src="../util/vue-2.4.0.js"></script> -->
    <script src="js/vue.js"></script>
    <style>
        li{
            border: 1px dashed #999999;
            margin: 5px;
            line-height: 35px;
            padding-left: 5px;
            font-size: 12px;
            width: 100%;
        }

        li:hover{
            background-color: hotpink;
            transition: all 0.8s ease;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateY(-80px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.6s ease;
        }
    </style>
</head>
<body>
<div id="test">
    <div>
        <label for="">
            ID:
            <input type="text" v-model="id">
        </label>
        <label for="">
            Name:
            <input type="text" v-model="name" >
        </label>
        <input type="button" value="button" @click="add">
    </div>
    <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
    <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
    <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
    <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
    <transition-group appear tag="ul">
        <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
            {{item.id}} --- {{item.name}}
        </li>
    </transition-group>
</div>
<script>
    var vm1 = new Vue({
        el: "#test",
        data: {
            id:"",
            name:"",
            list:[
                { id: 1, name: '赵高' },
                { id: 2, name: '秦桧' },
                { id: 3, name: '严嵩' },
                { id: 4, name: '魏忠贤' }
            ]
        },
        methods: {
            add:function () {
                this.list.push({id:this.id,name:this.name})
                this.id=this.name=""
            },
            del:function (index) {
                this.list.splice(index,1)
            }
        }
    })
</script>
</body>
</html>
标签：function,动画,vue,name,ease,list,leave,例子,id
来源： https://www.cnblogs.com/shaozhu520/p/16088205.html