欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue过度效果 动画

程序员文章站 2022-05-02 20:05:40
...

Vue框架使用css3过渡效果或是js动画

Vue内部提供了一个叫做transition的过渡组件

使用transition包裹过渡元素，那么会自动添加 6 个类名 8个钩子函数

  • 默认 类名 开头 v
  • 如果有name属性，那么使用 这个name属性值作为类名开头
  1. 实现方式
    • 在 CSS 过渡和动画中自动应用 class 【 自己写 】
    • 可以配合使用第三方 CSS 动画库，如 Animate.css
    • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
    • 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
  2. 第一种 [ 在 CSS 过渡和动画中自动应用 class 【 自己写 】 ]
  3. 第二种： animate.css 【 推荐 】
  4. 第三种： Vue提供了8个javascript钩子，我们需要自定义js动画
  5. 第四种： 使用第三方插件： Velocity.js

第一种

<!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>
    .slide-fade-enter-active {
      transition: all .3s ease;
    }
    .slide-fade-leave-active {
      transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
      transform: translateX(100px);
      opacity: 0;
    }
      
  </style>
</head>
<body>
  <div id="app">
    <button @click = "flag = !flag"> 点击 </button>
    <transition name = "slide-fade">
      <p v-if = "flag"> 动画元素 </p>
    </transition>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>
</html>

第二种

<!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>
  <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click = "flag = !flag"> 点击 </button>
    <transition name = "slide-fade"
      enter-active-class = "animated bounceIn"
      leave-active-class = "animated bounceOut"
    >
      <p v-if = "flag"> 动画元素 </p>
    </transition>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>
</html>

第三

<!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://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

</head>
<body>
  <div id="app">
    <button @click="show =!show">
        Toggle
      </button>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <p v-if="show">
          Demo
        </p>
      </transition>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      beforeEnter: function (el) {
        el.style.opacity = 0
        el.style.transformOrigin = 'left'
      },
      enter: function (el, done) {
        Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
        Velocity(el, { fontSize: '1em' }, { complete: done })
      },
      leave: function (el, done) {
        Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
        Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
        Velocity(el, {
          rotateZ: '45deg',
          translateY: '30px',
          translateX: '30px',
          opacity: 0
        }, { complete: done })
        Velocity( el, { translateX: '100px' }, { duration: 1000 })
      }
    }
  })
</script>
</html>

上一篇： LinearLayout的动画效果

下一篇： jQuery的动画效果

推荐阅读