Vue入门（八）---- animate过渡

简介：

transition方法的使用
transition内置方法
transition-group
animate库实现过渡动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib\vue.js"></script>
    <link rel="stylesheet" href="lib\animate.css">
    <style>
        [v-cloak] {
            display: none;
        }
        p {
            width: 100px;
            height: 100px;
            background: red;
            margin: 10px auto;
        }
        /* .fade-enter-active, .fade-leave-active {
            transition: 1s all ease;
        }
        .fade-enter-active {
            opacity: 1;
            width: 300px;
            height: 300px;
        }
        .fade-leave-active {
            opacity: 0;
            width: 100px;
            height: 100px;
        }
        .fade-enter, .fade-leave {
            width: 100px;
            height: 100px;
            opacity: 0;
        } */

    </style>
    <script>
        window.onload = function() {
            new Vue({
                el: '#box',
                data: {
                    show: '',
                    list: ['apple', 'banana', 'orange', 'pear']
                },
                computed: {
                    lists: function() {
                        var arr = [];
                        this.list.forEach(function(val) {
                            if (val.indexOf(this.show) != -1) {
                                arr.push(val);
                            }
                        }.bind(this))
                        return arr;
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="box" v-cloak>
        <input type="text" v-model="show">
        <!-- class定义 .fade
            .fade-enter{}            初始状态
            .fade-enter-active{}     进入过程
            .fade-leave{}            离开状态
            .fade-leave-active{}     离开过程
        -->
        <transition-group enter-active-class="zoomInLeft" leave-active-class="bounceOutRight">
            <!-- 内置方法
                @before-enter = "beforeEnter"
                @enter = "enter"
                @after-enter = "afterEnter"
                @before-leave = "beforeLeave"
                @leave = "leave"
                @after-leave = "afterLeave"
            -->
            <!-- transition-group 多个元素运动，注意绑定key:1 -->
            <p v-show="show" class="animated" v-for="(val, index) in lists" :key="index">
                {{val}}
            </p>   
        </transition-group>

    </div>
</body>
</html>
Vue入门（八）---- animate过渡

简介：

猜你喜欢
