vue-实现动画类型

最新推荐文章于 2024-07-05 08:45:00 发布

Duxiangtao

最新推荐文章于 2024-07-05 08:45:00 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/Duxiangtao/article/details/90648252

版权

Vue实现动画类型:

vue中实现过渡或是动画一共提供了这样四种形式：

在 CSS 过渡和动画中自动应用 class — 自己写css3动画
可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用
在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画
可以配合使用第三方 JavaScript 动画库，如 Velocity.js – 用别人写好的动画库

vue只要一使用transition组件就会自动添加6个类名和 8 个钩子函数
transition组件如果有name选项，就可以将类名 v- 换成 ‘name’- 类名
使用第三方的css过渡库 animate.css

6个类名和8个钩子函数类型

 .fade-enter (fade是name名，可变)
 .fade-enter-active
  enter-to (2.1.8+)
  leave
  leave-active
  leave-to (2.1.8+)

第一种使用方式自己写

  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:after-enter="afterEnter"
    v-on:enter-cancelled="enterCancelled"

    v-on:before-leave="beforeLeave"
    v-on:leave="leave"
    v-on:after-leave="afterLeave"
    v-on:leave-cancelled="leaveCancelled"
  >
  </transition>

<!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="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click=" show = !show ">转换</button>
        <transition name="fade">
            <p v-show="show"> {{ msg }} </p>
        </transition>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true,
            msg: 'hello'
        }
    })
</script>

</html>

第二种使用方式使用第三方 CSS 动画库，如 Animate.css

<!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="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <link rel="stylesheet" href="./animate.css">
</head>

<body>
    <div id="app">
        <button @click=" show = !show ">转换</button>
        
        <transition 
         name="fade" model="out-in"
         enter-active-class = "animated slideInLeft"
         leave-active-class = "animated slideOutLeft"
        >
            <p v-show = "show"> 原来的内容 </p>
        </transition>
        <transition 
         name="fade" mode="in-out"
         enter-active-class = "animated slideInLeft"
         leave-active-class = "animated slideOutLeft"
        >
            <p v-show = "!show"> 转换的内容 </p>
        </transition>

        <!-- 另一种效果 -->
        <!-- <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
        >
        <p v-if="show">hello</p>
        </transition> -->
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true,
            msg: 'hello'
        }
    })
</script>

</html>