vue animate.css训练动画案例 列表循环

impress 2020-02-02

制作目标动画:向上入场添加数据,点击数据右滑动离场

简单页面效果:

vue animate.css训练动画案例 列表循环

实现代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <script type="text/javascript" src="js/vue.js" ></script>
        <style type="text/css">
            .box li{
                width: 300px;
                line-height: 30px;
                margin: 5px;
                padding: 0 10px;
                border: 1px dashed royalblue;
                list-style: none;            
            }
            .box li:hover{
                background-color: royalblue;    
                color: #fff;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="app">
            id: <input type="text" v-model="id"/>
            name: <input type="text" v-model="name"/>
            <button @click="add">添加</button>
            <ul class="box">
                <transition-group enter-active-class="animated slideInUp" leave-active-class="animated slideOutRight" >
                    <li v-for="item in list" :key="item.id" @click="del(item.id)">{{item.name}}</li>
                </transition-group>
            </ul>
                
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:‘#app‘,
                data:{
                    list:[
                        {id:1,name:‘xiaoxiao‘},
                        {id:2,name:‘maomao‘},
                        {id:3,name:‘dada‘},
                        {id:4,name:‘hehe‘},
                    ],
                    id:‘‘,
                    name:‘‘
                },
                methods:{
                    add(){
                        this.list.push({id:this.id,name:this.name})
                    },
                    del(id){
                        var index = this.list.findIndex(function(item){
                            return item.id == id
                        })
                        this.list.splice(index,1)
                    }
                }
            })
        </script>
    </body>
</html>

相关推荐

lyjava / 0评论 2020-07-30