vue动画 <transition-group> 使用半场动画 

<style>
        /* 给动画添加一组过度效果 */
        .v-enter,
        .v-leave-to {
            opacity: 0.8;
            /* 从右向左进入 */
            transform: translateX(80px);
            /* 从下向上进入 */
            transform: translateY(80px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.6s ease;
        }
    </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>

            <label>
                添加:<input type="button" @click="add" value="添加">
            </label>
        </div>

        <!-- 在实现列表过度的时候  如果需要过度的元素是通过v-for循环渲染出来的  不能
            使用transition包裹  需要使用transitionGroup -->
        <!-- 如果要为v-for循环创建的元素设置动画 必须为每一个元素设置 :key属性 -->
        <ul>
            <transition-group>
                <li v-for="item in list" :key="item.id">
                    {{item.id}}---我是动画--->{{item.name}}
                </li>
            </transition-group>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id: "",
                name: "",
                list: [{
                        id: 1,
                        name: "赵高1"
                    },
                    {
                        id: 2,
                        name: "赵高2"
                    },
                    {
                        id: 3,
                        name: "赵高3"
                    },
                    {
                        id: 4,
                        name: "赵高4 "
                    },
                ]
            },

            methods: {
                add() {
                    this.list.push({
                        id: this.id,
                        name: this.name
                    })
                    this.name = this.id = "";
                },
            },
        })
    </script>

posted @ 2021-01-03 21:33  南风晚来晚相识  阅读(223)  评论(0)  编辑  收藏  举报