VUE动画效果

最新推荐文章于 2024-05-17 01:31:45 发布

zeYound

最新推荐文章于 2024-05-17 01:31:45 发布

阅读量164

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/Aerozb/article/details/114273642

版权

VUE 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>transition动画</title>

    <!--外链样式表都要加 rel="stylesheet"-->
    <link rel="stylesheet" href="lib/animate.css">
    <!-- 入场动画：bounceIn    离场动画：bounceOut -->

    <style>
    .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateX(150px);
        color: red;
    }
    .v-enter-active,.v-leave-active{
        /* 过度动画 */
        transition:all 0.8s ease;
    }

    .my-enter{
        transform: translateX(150px);
        color:blue;
    }
    .my-leave-to{ 
        transform: translateX(-150px);
    }
    .my-enter-active,.my-leave-active{
        /* 过度动画 */
        transition:all 0.8s ease;
    }
    </style>
    
</head>
<body>
    <div id="app">
    <input type="button" value="点击我" @click="isActive=!isActive;msg='66666'" >
    <input type="button" value="点击我" @click="isActive=!isActive;msg='88888'" >{{msg}}
    <transition>
            <div v-show="isActive">{{msg}}</div>
        </transition>

    <h3 v-show="isActive">我出现啦</h3>

    <!-- <transition>要实现动画效果条件：1、component组件的切换；2、标签的要有显示和消失（v-show或v-if） -->
    <!-- Vue用动画必须要在这个组件上包一个transition标签 -->
    <transition>
            <h3 v-show="isActive">我出现啦0</h3>
    </transition>

    

    <!-- 在transition 标签上加 name="my" 可以实现多动画 -->
    <transition name="my">
        <h3 v-show="isActive">我出现啦1</h3>
    </transition>

    <!-- duration控制动画时间 -->
    <!-- 调用animate.css库的动画效果 -->
    <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="500">
            <h3 v-show="isActive">我出现啦2</h3>
    </transition>

    <!-- 可以将animated加到目标标签上 -->
    <transition enter-active-class="bounceInDown" leave-active-class="bounceOutUp" >
            <h3 class="animated" v-show="isActive">我出现啦3</h3>
    </transition>

    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" >
        <h3 v-show="isActive">我出现啦4</h3>
    </transition>
    </div>
    
</body>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-resource-1.3.4.js"></script>
<script>
var vue= new Vue({
    el:"#app",
    data:{
        isActive:false,
        msg:"我来了"
    },
    methods: {
        // el可以不用写
        // 用这种方法要标明起始位置和终点位置
        // el是带@before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"属性的transition标签
        beforeCreate(el) {
            //设置动画最开始的地方
            el.style.transform="translateX(500px)";
        },
        //这一段没有实际作用，但不写就不会出现动画效果
        enter(el,done){
            // 可以认为el.offsetWidth会强制动画刷新，可以等价替换为offsetHeight、offsetDown、offsetUp，其他都不行
            el.offsetWidth;
            el.style.transition="all 2s ease";
            //必须要有done()才能调用afterEnter()，可以看作done()=afterEnter
            done();
        },
        //这为动画的终点状态 
        afterEnter(el){
            el.style.transform="translate(0,-500px)";
        }
        
        // beforeEnter(el){
        //         el.style.transform = "translate(0,0)";
        //     },
        //     enter(el, done){
        //         el.offsetWidth;
        //         el.style.transform = "translate(100px,200px)";
        //         el.style.transition = "all 2s ease";
        //         done();
        //     },
        //     afterEnter(){
        //         this.flag = !this.flag;
        //     }
    },
})


//v-enter【起始位置状态】，v-leave to【终点位置状态】
//v-enter-active【开始一瞬间状态】，v-leave-active【终点一瞬间状态】
/*
v-move和v-leave-active一起使用可以实现后续标签的动画效果
v-move{
    transition(all 0.8s ease);
}
v-leave-active{
    display:absolute;
}
*/
</script>
</html>

zeYound

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE动画效果

<!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>tra
复制链接

扫一扫