zoukankan      html  css  js  c++  java
  • 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>
    

  • 相关阅读:
    7.微软AJAX的解决方案
    6.投票系统
    5.JSON
    4.无刷新评论
    3.输入商品名称后自动弹出其价格示例
    2.JQuery AJAX
    1.AJAX简介
    网站优化
    防抖和节流
    在地址栏输入一次地址会发生什么
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/14227011.html
Copyright © 2011-2022 走看看