v-for animating using transition-group elements package


<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <title> the Title </ title> 
    <Script the src = "lib / VUE-2.4.0.js"> </ Script> 
    <style> 
        Li { 
            border: 1px Dashed Red; 
            margin: 5px; 
            Line-height: 38px; 
            padding-left: 10px; 
            width: 100%; / * complex .v-leave-active {else using shift in addition, when the width becomes smaller animation 
                                        position: Absolute; 
                                    } * / 
        } 

        .v-Enter, 
        .v-to-Leave { 
            Opacity: 0; 
            Transform: translateY, (80px);
        }
        Enter-Active-.v, 
        .v-Leave-Active { 
            Transition: All 0.6s EASE; 
        } 


        / * with the use of two, the effect can be achieved gradually drift up subsequent list * / 
        .v-Move { 
            Transition: All 0.6s EASE; 
        } 
        .v-Leave-Active { 
            position: Absolute; 
        } 
    </ style> 
</ head> 
<body> 
    <div ID = "App"> 
        <label> 
            ID: 
            <INPUT type = "text" = V-Model "ID"> 
        </ label> 
        <label> 
            name: 
            <INPUT type = "text" V-Model = "name"> 
        </ label>
        <input type="button" value="添加" @click="add">
        <-! <ul> -> 
        <-! 
            appear throughout the property li do admission animated 
            tag did not write the span element is added by default is the specified element 
        -> 
            <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> 
            <-! 
                If you need to filter elements by v-for circulation rendered, can not use the transition package, requires the use of transition-group 
                if you want to create elements animate v-for loop, each must an element is provided: key properties 
            -> 
        <- </ UL!> -> 
    </ div> 
    <Script> 
        var Vue new new VM = ({ 
            EL: "App #",
            data:{
                id:"",
                name:"",
                list:[
                    {
                        id:1,
                        name:"中国馆"
                    },
                    {
                        id:2,
                        name:"蒙古国"
                    }
                ]
            },
            methods:{
                add(){
                    this.list.push({id:this.id,name:this.name})
                    this.id=this.name=""
                },
                del(i){
                    this.list.splice(i,1)
                }
            }
        })
    </script>
</body>
</html>
v-for animating using transition-group elements package

Guess you like
