过渡效果与动画

最新推荐文章于 2023-09-28 11:15:35 发布

wxxuejishuangxia

最新推荐文章于 2023-09-28 11:15:35 发布

阅读量417

点赞数

文章标签： vue动画效果 vue过渡效果

本文链接：https://blog.csdn.net/wxxuejishuangxia/article/details/93979721

版权

过渡效果与动画

1、过渡效果

过渡模式：mode分为两种

1、in-out：先进入再离开

2、out-in：先离开再进入
一个过渡或是一个动画可以分为两个大阶段：进入、离开

2、动画

使用形式

1、在 CSS 过渡和动画中自动应用 class

2、可以配合使用第三方 CSS 动画库，如 Animate.css

3、在过渡钩子函数中使用 JavaScript 直接操作 DOM

4、可以配合使用第三方 JavaScript 动画库，如 Velocity.js
使用Vue提供的 transition 组件时，vue会提供6（4）个类名，8个钩子函数（钩子函数：特定的时间（满足某一个条件），就会自动触发的一个方法）
8个钩子函数

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) {
        // ...
      }

使用transition组件

<style>
    .wx-enter-active, .wx-leave-active {
      transition: opacity 2s;
    }
    .wx-enter, .wx-leave-to {
      opacity: 0;
    }
</style>
<div id="app">
    <button @click = "change"> 切换 </button>
    <transition name = "wx">  <!--name可以自己随意取，记住上面的style中要跟着改-->
    <p v-show = "flag"> hello </p>
    </transition>   <!--使用transition组件-->
</div>

<script>
new Vue({
  el: '#app',
  data: {
    flag: true
  },
  methods: {
    change () {
      this.flag = !this.flag
    }
  }
})
</script>

引入第三方的Animate.css文件

<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">  <!--引入css文件-->
<div id="app">
    <button @click = "change"> 切换 </button>
    <transition
      enter-active-class = "animated slideInLeft"
      leave-active-class = "animated slideOutLeft"
    >
      <p v-show = "flag"> hello </p>
    </transition>
  </div>

<script>
new Vue({
    el: '#app',
    data: {
      flag: false
    },
    methods: {
      change () {
        this.flag = !this.flag
      }
    }
  })
</script>

钩子函数应用实例，配合使用第三方 JavaScript 动画库

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<!--引入velocity.js文件-->
<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: false
  },
  methods: {
    beforeEnter: function (el) { //el指的就是dom
      console.log( 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 })
    }
  }
})
</script>

wxxuejishuangxia

关注

0
点赞
踩
0

收藏

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

过渡效果与动画1、过渡效果过渡模式：mode分为两种1、in-out：先进入再离开2、out-in：先离开再进入一个过渡或是一个动画可以分为两个大阶段：进入、离开2、动画使用形式1、在 CSS 过渡和动画中自动应用 class2、可以配合使用第三方 CSS 动画库，如 Animate.css3、在过渡钩子函数中使用 JavaScript 直接操作 DOM...
复制链接

扫一扫