vue 自定义动画

1. 使用默认的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>

        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }

        /*添加的时候*/
        .fade-enter {
            opacity: 0;
        }

        .fade-enter-active {
            transform-origin: left center;
            transition: opacity 3s;
            animation: bounce-in 1s;
        }

        /*移除的时候*/
        .fade-leave-to {
            opacity: 0;
        }

        .fade-leave-active {
            transform-origin: left center;
            transition: opacity 2s;
            animation: bounce-in 1s reverse;
        }
    </style>
</head>
<body>
<div id="app">
    count : {{size}}
    <input type="text" v-model="inputValue">
    <button @click="press">press</button>

    <ul>
        <transition-group name="fade">

            <todo-item :content="i"
                       v-for="(i,index) in list"
                       :index="index"
                       :key="index"
                       @delete="deleteChild(index)"></todo-item>

        </transition-group>

    </ul>

</div>

<script>

    let todoItem = {
        props: ['content'],
        template: '<li @click="press">{{content}}</li>',
        methods: {
            press(target) {
                this.$emit('delete')
            }
        }
    }
    const app = new Vue({
        el: '#app',
        data: {
            list: ['第一', '第二'],
            inputValue: '',
            count: 0
        },
        components: {
            TodoItem: todoItem
        },
        methods: {
            press: function () {
                // alert("press")
                this.list.push(app.$data.inputValue)
                this.inputValue = ''
            },
            deleteChild: function (childNode) {
                console.log(childNode)
                this.list.splice(childNode, 1)
            }
        },
        watch: {
            list: function (list, newlist) {
                this.count = newlist.length
            },
            inputValue: function (oldVal, newVal) {
                console.log(newVal)

            }
        },
        computed: {
            size: {
                get() {
                    return this.count;
                },
                set(value) {
                    console.log(value)
                }
            }
        }
    })


</script>

</body>
</html>

2. 使用 animate.css 库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/2.0/animate.css" rel="stylesheet">

    <style>


    </style>
</head>
<body>
<div id="app">
    count : {{size}}
    <input type="text" v-model="inputValue">
    <button @click="press">press</button>

    <ul>
        <transition-group name="fade"
                          appear
                          appear-active-class="animated tada"
                          :duration="{ enter: 200, leave: 200 }"
                          enter-active-class="animated swing"
                          leave-active-class="animated shake"
        >

            <todo-item :content="i"
                       v-for="(i,index) in list"
                       :index="index"
                       :key="index"
                       @delete="deleteChild(index)"></todo-item>

        </transition-group>

    </ul>

</div>

<script>

    let todoItem = {
        props: ['content'],
        template: '<li @click="press">{{content}}</li>',
        methods: {
            press(target) {
                this.$emit('delete')
            }
        }
    }
    const app = new Vue({
        el: '#app',
        data: {
            list: ['第一', '第二'],
            inputValue: '',
            count: 0
        },
        components: {
            TodoItem: todoItem
        },
        methods: {
            press: function () {
                // alert("press")
                this.list.push(app.$data.inputValue)
                this.inputValue = ''
            },
            deleteChild: function (childNode) {
                console.log(childNode)
                this.list.splice(childNode, 1)
            }
        },
        watch: {
            list: function (list, newlist) {
                this.count = newlist.length
            },
            inputValue: function (oldVal, newVal) {
                console.log(newVal)

            }
        },
        computed: {
            size: {
                get() {
                    return this.count;
                },
                set(value) {
                    console.log(value)
                }
            }
        }
    })


</script>

</body>
</html>