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

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

简单页面效果:

vue animate.css训练动画案例 列表循环_第1张图片

实现代码如下:

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>

 

你可能感兴趣的:(vue animate.css训练动画案例 列表循环)