注册登录

Vue列表动画----自己做的 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
<body>
    

    <style>
        ul li{
            width: 300px;
            
            text-decoration: none;
            margin: 5px 0px;
            border: 1px solid black;
        }
        ul li{
            list-style: none;
        }
        ul li:hover{
            background-color: hotpink;
        }



/* 过度类动画 */
    /* 动画进入前  元素移动到Y轴80px 不透明 离开后还会移动到80px这里操作就是translate
    说明  如果定义rotate  那就在enter-active  是旋转的效果*/
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: rotate(180deg);
    }
    /* 开始动画的时候，动画会移动到原来的位置 执行过度效果*/
    .v-enter-active,
    .v-leave-active {
      transition: all 0.6s ease;
    }
    </style>

    <div class="container">
        <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="添加" v-on:click="add">
        </div>
        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
       <!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
       <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->

       <!-- transition-group中也可以写钩子函数 但是有点问题  我还没解决 -->
       <!--v-on:before-enter="beforeEnter"
          v-on:enter="enter"
          v-on:after-enter="afterEnter"  -->
        <transition-group appear tag="ul"
        

        >
                <li v-for="(item, index) in listName" :key="item.id"
                @click="del(index)">{{item.id}}---------{{item.name}}--------{{item.number}}
        </li>
        </transition-group>



    </div>
    
    <script>
    
        var vm=new Vue({
            el:'.container',
            data:{
                id:'',
                name:'',
                listName:[
                    {id:'1',name:'时尚网吧',number:'2019'},
                    {id:'2',name:'怪兽电竞',number:'2017'},
                    {id:'3',name:'银河网络',number:'2017'}
                ]
            },
            methods: {
                // 添加函数
                add(){
                    this.listName.push({id:this.id,name:this.name,number:'2019'});
                    this.id=this.name='';
                },
                // 删除函数
                del(i){
                    this.listName.splice(i,1);
                },
                // // 动画生命周期函数
                // beforeEnter(el){
                //     el.style.transform="translateY(80px)";
                //     el.style.opacty=0
                // },
                // enter(el,done){
                //     el.offsetHeight
                //     el.style.transition="all 0.4s ease"
                //     done()
                // },
                // afterEnter(el){
                //     el.style.transform="translateY(0)"
                // },
            },

        })
    </script>
</body>
</html>
知识兔
计算机