vue 2.0 transition学习笔记

运动东西(元素，属性、路由....)class定义:.fade-enter{} //初始状态.fade-enter-active{} //变化成什么样 -> 当元素出来(显示).fade-leave{}.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)如何animate.css配合用？

scorpio_h

4125人浏览 · 2017-03-04 00:04:52

scorpio_h · 2017-03-04 00:04:52 发布

<transition name="fade">
运动东西(元素，属性、路由....)
</transition>

class定义:
.fade-enter{} //初始状态
.fade-enter-active{} //变化成什么样 -> 当元素出来(显示)
.fade-leave{}

.fade-leave-active{} //变成成什么样 -> 当元素离开(消失)

如何animate.css配合用？
<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">

</transition>

多个元素运动:
<transition-group enter-active-class="" leave-active-class="">


</transition-group>

栗子1（普通动画）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            width:300px;
            height:300px;
            background: red;
        }
        .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{
            /*初始状态*/
            opacity: 0;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="button" value="点击显示隐藏" @click="show=!show">
        <transition name="fade" mode="">
            <p v-show="show"></p>
        </transition>
    </div>

    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:"#box",
                data:{
                    show:false
                }
            })
        }
    </script>
</body>
</html>

栗子2（相关函数）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            width:300px;
            height:300px;
            background: red;
        }
        .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{
            /*初始状态*/
            opacity: 0;
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="button" value="点击显示隐藏" @click="show=!show">
        <transition name="fade" @before-enter="beforeEnter" 
            @enter="enter" @after-enter="afterEnter"
            @before-leave="beforeLeave" @leave="leave"
            @after-leave="afterLeave"
        >
            <p v-show="show"></p>
        </transition>
    </div>

    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:"#box",
                data:{
                    show:false
                },
                methods:{
                    beforeEnter(el){
                        console.log('动画enter之前');
                        console.log(el)
                    },
                    enter(el){
                        console.log('动画enter进入'),
                        console.log(el)
                    },
                    afterEnter(el){
                        console.log('动画进入之后'),
                        console.log(el),
                        el.style.background="blue"
                    },
                    beforeLeave(el){
                        console.log('动画leave之前');
                        console.log(el)
                    },
                    leave(el){
                        console.log('动画leave进入'),
                        console.log(el)
                    },
                    afterLeave(el){
                        console.log('动画离开之后'),
                        console.log(el),
                        el.style.background="red"
                    }
                }
            })
        }
    </script>
</body>
</html>

栗子3（配合animate）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <style>
        p{
            width:100px;
            height:100px;
            background: red;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="button" value="点击显示隐藏" @click="show=!show">
        <transition enter-active-class="zoomInLeft" 
            leave-active-class="zoomOutRight"
        >
            <p v-show="show" class="animated"></p>
        </transition>
    </div>

    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:"#box",
                data:{
                    show:false
                }
            })
        }
    </script>
</body>
</html>

栗子4（多个元素）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <style>
        p{
            width:100px;
            height:100px;
            background: red;
            margin:10px auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="button" value="点击显示隐藏" @click="show=!show">
        <transition-group enter-active-class="zoomInLeft" 
            leave-active-class="zoomOutRight"
        >
            <p v-show="show" class="animated" :key="1"></p>
            <p v-show="show" class="animated" :key="2"></p>
        </transition-group>
    </div>
    
    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script>
        window.οnlοad=function(){
            new Vue({
                el:"#box",
                data:{
                    show:false
                }
            })
        }
    </script>
</body>
</html>

栗子5（多个元素循环输出）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="//cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <style>
        p{
            width:100px;
            height:100px;
            background: red;
            margin:10px auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="text" v-model="show">
        <transition-group enter-active-class="zoomInLeft" 
            leave-active-class="zoomOutRight"
        >
            <p class="animated" v-show="show" v-for="(val,index) in lists" :key="index">
                {{val}}
            </p>
        </transition-group>
    </div>
    
    <script src="//cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
    <script>
        window.οnlοad=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>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^