vue中动画的实现的几种方式

最新推荐文章于 2023-06-02 21:47:05 发布

weixin_33717117

最新推荐文章于 2023-06-02 21:47:05 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5a32011c5188253e2470fd4a

版权

方式一：css动画

过渡的类名过渡的类名在进入/离开的过渡中，会有 6 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。 v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。 v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。 v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。 v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。 v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

<!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>
  <style>
    /* 注意：这个6个过渡类，都是vue内置的，所以，需要使用vue提供的这个类名才行 */

    .v-leave {
      /* 定义 出场动画的 起始状态 */
      /* 只停留一帧 */
      transform: translateY(100px);
    }

    .v-leave-active {
      /* 定义 出场动画 过程 */
      transition: all 1s ease;
    }

    .v-leave-to {
      /* 定义 出场动画 结束状态（即：该动画要达到的目标状态） */
      transform: translateY(300px);
      opacity: 0;
    }

    /* 定义  入场动画 */

    .v-enter {
      /* 定义 入场动画 的起始状态 */
      transform: translateY(300px);
      opacity: 0;
    }

    .v-enter-active {
      /* 定义 入场动画 过程 */
      transition: all 2s ease;
    }

    .v-enter-to {
      /* 定义 入场动画 过程 */
      /* 只停留一帧 */
      transform: translateY(0px);
    }
  </style>
</head>

<body>
  <div id="app">
    <button @click="fn">过渡</button>
    <!-- 如果要实现Vue中的过渡或者动画效果，需要使用内置的 transition 组件包裹要执行过渡或动画的元素才行 -->
    <transition>
      <h1 v-show="isShow">这个东西多少钱？how much？</h1>
    </transition>
  </transition>
  </div>
  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: true
      },

      methods: {
        fn() {
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>

</html>
复制代码

方式二：使用animate.css动画库

<!-- 引入 第三方css动画库 -->
  <link rel="stylesheet" href="./node_modules/animate.css/animate.min.css">

<body>
  <div id="app">
    <button @click="fn">过渡</button>

    <!-- 通过 修改过渡组件transition的样式属性，来指定我们要使用的动画类名 -->
    <!-- animated 是必须要添加的一个类，说明当前元素要执行动画效果 -->
    <!-- tada / bounceOutRight 是 animate.css 提供的 -->
    <transition 
      enter-active-class="animated tada"
      leave-active-class="animated hinge">
      <h1 v-show="isShow">这个东西多少钱？how much？</h1>
    </transition>
  </div>
  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: true
      },

      methods: {
        fn() {
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>
复制代码

方式三、使用Js钩子函数

<body>
  <div id="app">
    <button @click="isShow=!isShow">过渡</button>

    <transition 
      @before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter">
      <h1 v-show="isShow">这个东西多少钱？how much？</h1>
    </transition>
  </div>
  <script src="./vue.js"></script>
  <script src="./node_modules/velocity-animate/velocity.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: false
      },

      methods: {
        beforeEnter(el) {
          // 开始动画之前，也就是起始状态
          // console.log('before');

          // 设置动画的起始状态
          el.style.transform = 'translateY(300px)'
          el.style.opacity = 0
          el.style.transition = 'all 2s ease'
        },
        enter(el, done) {
          // 动画指定的过程
          // console.log('enter');

          // 作用：告诉浏览器重绘或重排页面结构
          // offsetWidth 会通知浏览器重新计算元素的宽度，这样，会造成浏览器重绘
          // el.offsetWidth
          el.offsetHeight

          // 设置动画要达到的目标状态
          el.style.transform = 'translateY(0px)'
          el.style.opacity = 1
          done()
        },
        afterEnter(el) {
          // 动画结束
          // console.log('after');

          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>
复制代码

方式四、使用velocity js动画库

<body>
  <div id="app">
    <button @click="isShow=!isShow">过渡</button>

    <transition 
      @before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      >
      <h1 v-show="isShow">这个东西多少钱？how much？</h1>
    </transition>
  </div>
  <script src="./vue.js"></script>
  <!-- 引包 -->
  <script src="./node_modules/velocity-animate/velocity.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        isShow: false
      },

      // 因为 velocity.js 就是一个JS动画库,所以,我们再使用velocity的时候,就不要在同时使用 CSS3的动画, 否则, 会造成混乱
      methods: {
        beforeEnter(el) {
          // 设置动画的起始状态
          el.style.opacity = 0
          el.style.fontSize = '12px'
          el.style.color = '#f00'
        },
        enter(el, done) {
          // 使用 Velocity.js 动画库的方式： 用法与 jQuery中的animate方法相同
          // 第一个参数：表示要执行动画的元素
          // 第二个参数：表示要执行动画的样式属性
          // 第三个参数：表示动画执行的时间长度
          // 第四个参数：表示动画执行完成的回调函数
          // Velocity(el, { fontSize: 50, opacity: 1 }, 2000, done)
          Velocity(el, { fontSize: 50, opacity: 1, color: '#0f0' }, {
            duration: 2000,
            complete: done
          })
        },
        afterEnter(el) {
          // 动画结束
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>
复制代码

weixin_33717117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中动画的实现的几种方式

方式一：css动画过渡的类名过渡的类名在进入/离开的过渡中，会有 6 个 class 切换。v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。v-enter...
复制链接

扫一扫