美文网首页
2020-02-14

2020-02-14

作者: 我是萌哒哒小羊 | 来源:发表于2020-02-14 14:46 被阅读0次

列表动画的实现

使用了 transition-group,.v-move,tag属性,appear

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            li{
                border: 1px dashed #999;
                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;
                
            }
            /* 下面的.v-move 和 .v-leave-active配合使用,能够实现列表后续的元素,渐渐地飘上来的效果 */
            .v-move{
                transition: all 0.6s ease;
            }
            .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" @click="add" value="添加">
                
                
            </div>
                <!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过v-for渲染出来的,不能使用
                transition包裹,需要使用transition-group -->
                <!-- 如果要为v-for循环创建的元素设置动画,必须为每一个元素设置 :key属性 -->
                <!-- 给transition-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 type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    id :'',
                    name:'',
                    list:[
                        {id:1,name:'赵高'},
                        {id:2,name:'秦桧'},
                        {id:3,name:'严嵩'},
                        {id:4,name:'魏忠贤'}
                    ]
                },
                methods:{
                    add(){
                        if(this.name!='')
                            this.list.push({id:this.id,name:this.name})
                        this.id = this.name = ''
                    },
                    del(i){
                        // splice方法 (i,1) 后面的数字如果只是1 那么就删i所指定的元素
                        this.list.splice(i,1)
                    }
                }
            })
        </script>
    </body>
</html>

相关文章

网友评论

      本文标题:2020-02-14

      本文链接:https://www.haomeiwen.com/subject/trndfhtx.html