vue过度效果动画

最新推荐文章于 2022-03-02 20:50:56 发布

阔怕的小怪兽

最新推荐文章于 2022-03-02 20:50:56 发布

阅读量166

点赞数

分类专栏： vue 文章标签： vue 过度

本文链接：https://blog.csdn.net/weixin_45356907/article/details/100050636

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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

默认类名开头 v
如果有name属性，那么使用这个name属性值作为类名开头

实现方式
- 在 CSS 过渡和动画中自动应用 class 【自己写】
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
第一种 [ 在 CSS 过渡和动画中自动应用 class 【自己写】 ]
第二种： animate.css 【推荐】
第三种： Vue提供了8个javascript钩子，我们需要自定义js动画
第四种：使用第三方插件： 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>