Vue动画之一： css方式

作者: 婷诗漾 | 来源:发表于2018-09-04 17:45 被阅读0次

Vue动画之一： css方式
五、Vue动画 ------ 2020-05-07
动画类文章
Vue中的动画
Vue神一般的打开姿势
Vue动画
vue的动画特效
vue中实现 ‘换肤 / 切换样式主题’ 功能的三种方式详解（干
(一)Vue中CSS动画原理
webpack#2.0结合vue-cli搭建开发环境

在Vue的项目中，需要用到动画效果的，当然可以了，下面将介绍通过Css做动画的方式。
1、通过设置 fade-enter, fade-enter-to, .fade-enter-active 和 fade-leave, fade-leave-to, .fade-leave-active来实现动画。

<head>
<script src ="vue.js"></script>
<style>
    .fade-enter, .fade-leave-to {
        opacity : 0 ;
    }
    .fade-enter-active, .fade-leave-active {
        transition : opacity 3s;
    }
    /*也可以用 v 代替 fade */
</style>
</head>
<body>
<div id = "myApp">
    <transition name = "fade">
        <h1 v-if = "show"> Hello Everyone, This is Christine! </h1>
    </transition>
    <button @click="handleClick"> 切换</button>

</div>

<!-- 若用 v-show 的话， 没有具体的效果 -->
<script>
    new Vue({
        el : "#myApp",
        data : {
            show : true
        },
        methods : {

            handleClick : function () {
                this.show = !this.show;
            }

        }
    })

</script>
</body>

2、通过引用 animate.css 动画库，实现动画效果。

<head>
<meta charset="UTF-8">
<title> 动画-animate.css </title>
<script src ="vue.js"></script>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div id = "myApp">
    <transition name = "fade"
        enter-active-class = "animated pulse"
        leave-active-class = "animated wobble">
        <h1 v-show = "show"> Hello Everyone, This is Christine! </h1>
    </transition>
    <button @click="handleClick"> 切换</button>
</div>
<script>
    new Vue({
        el : "#myApp",
        data : {
            show : true
        },
        methods : {
            handleClick : function () {
                this.show = !this.show;
            }

        }
    })
    
</script>

3、混用的方式：
a： transition 上面添加 appear 是为了在第一次刷新的时候，也有动画
b：由于animate.css 和自定义动画的持续的时间不一致，故，需要一致
type = "transition"
:duration = "5000"
:duration = "{enter: 5000, leave : 10000}"

<head>
<meta charset="UTF-8">
<title> 同时使用animate.css 和 自定义的动画 </title>
<script src ="vue.js"></script>
<link rel="stylesheet" href="animate.css">

<style>

    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
        
    .fade-enter-active, .fade-leave-active{
        transition: opacity 3s;
    }


</style>
<!-- 

    1、 transition 上面添加  appear 是为了在第一次刷新的时候， 也有动画
    2、由于animate.css 和 自定义动画的持续的时间不一致， 故， 需要一致
        
        type = "transition"
        :duration = "5000"
        :duration = "{enter: 5000, leave : 10000}"
 -->
</head>
<body>
<div id = "myApp">
    <transition name = "fade"
        :duration = "{enter: 5000, leave : 10000}"
        appear
        enter-active-class = "animated pulse fade-enter-active"
        leave-active-class = "animated wobble fade-leave-active"
        appear-active-class = "animated tada"
    >
        <h1 v-show = "show"> Hello Everyone, This is Christine! </h1>
    </transition>
    <button @click="handleClick"> 切换</button>
</div>
<script>
    new Vue({
        el : "#myApp",
        data : {
            show : true
        },
        methods : {
            handleClick : function () {
                this.show = !this.show;
            }
        }
    })
</script>
</body>