Vue过渡效果 && 动画

最新推荐文章于 2023-03-31 19:08:05 发布

QQ_1440277049

最新推荐文章于 2023-03-31 19:08:05 发布

阅读量180

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/HelloWord182/article/details/93781081

版权

Vue基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

                    
                        
                    
                    使用形式 
  在 CSS 过渡和动画中自动应用 class    <!DOCTYPE html>
    <html lang="en">
    <head>      
        <title>Document</title>
        <script src="../../Vue@2.6.10.js"></script>
        <style>
            .renzejun-enter-active,
            .renzejun-leave-active {
                transition: opacity .5s;
            };
            .renzejun-enter,/* .renzejun-leave-active below version 2.1.8 */
            .renzejun-leave-to 
            {
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="flag=!flag">开关</button>
            <transition name="renzejun">
                <p v-show="flag">哈哈</p>
            </transition>
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    flag: true
                }

            })
        </script>
    </body>

    </html>
 
可以配合使用第三方 CSS 动画库，如 Animate.css 【 要求 】<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
<div id="app">
    <button @click="change">开关</button>
    <transition enter-active-class="animated fadeIn" leave-active-class="animated slideOutLeft">
        <p v-show="flag">1903</p>
    </transition>
</div>
 new Vue({
        el: '#app',
        data: {
            flag: true
        },
        methods: {
            change() {
                this.flag = !this.flag;
            }
        }
    })
 
在过渡钩子函数中使用 JavaScript 直接操作 DOM 
    我们使用Vue提供的 transition 组件时，vue会提供6（4）个类名，8个 钩子函数 给大家使用
钩子函数： 特定的时间（ 满足某一个条件 ） ， 就会自动触发的一个方法
 
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
 一个过渡或是一个动画我们分为两个大阶段
   进入
   离开      beforeEnter: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      enter: function (el, done) {
        // ...
        done()
      },
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
       // --------
      // 离开时
      // --------

      beforeLeave: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      leave: function (el, done) {
        // ...
        done()
      },
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }
 
 

                

QQ_1440277049

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue过渡效果 && 动画

使用形式在 CSS 过渡和动画中自动应用 class <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="../../Vue@2.6.10.js">&l...
复制链接

扫一扫