码迷,mamicode.com
首页 > Web开发 > 详细

Vue过渡效果之JS过渡

时间:2017-10-03 23:22:55      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:详细介绍   技术   velocity   map   过渡效果   自定义   比较   font   ogg   

前面的话

  与CSS过渡不同,JS过渡主要通过事件进行触发。本文将详细介绍Vue过渡效果之JS过渡

 

事件钩子

  JS过渡主要通过事件监听事件钩子来触发过渡,共包括如下的事件钩子

技术分享
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
技术分享

  下面各个方法中,函数中的参数el表示要过渡的元素,可以设置不同情况下,el的位置、颜色等来控制其动画的改变

技术分享
// ...
methods: {
  // --------
  // 进入中
  // --------
  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // --------
  // 离开时
  // --------
  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}
技术分享

  上面方法中,有两个方法比较特殊,是enter()和leave()方法,它们接受了第二个参数done。当进入完毕或离开完毕后,会调用done()方法来进行接下来的操作

  [注意]对于仅使用JS过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响

【简单事例】

  下面是一个JS过渡的简单事例

技术分享
<div id="demo">
  <button @click="show = !show">Toggle</button>
  <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" :css="false">
    <p v-if="show">Demo</p>
  </transition>
</div>
技术分享
技术分享
<script>
new Vue({
  el: ‘#demo‘,
  data: {
    show: false
  },
  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 })
    }
  }
})  
</script>
技术分享

 

 

初始渲染过渡

  可以通过 appear 特性设置节点的在初始渲染的过渡,自定义 JavaScript 钩子

技术分享
<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>
技术分享

  下面是一个例子

技术分享
<div id="demo">
  <button @click="reset">还原</button>
  <transition appear  :appear="customAppearHook">
    <p>小火柴的蓝色理想</p>
  </transition>
</div>
技术分享
技术分享
<script>
new Vue({
  el: ‘#demo‘,
  methods:{
    reset(){
      history.go();
    }, 
    customAppearHook(el, done) {
      Velocity(el, {backgroundColor:"#ddd",translateX:200});
      Velocity(el,"reverse",{complete:done})
    }, 
  }
})
</script>
技术分享

 

Vue过渡效果之JS过渡

标签:详细介绍   技术   velocity   map   过渡效果   自定义   比较   font   ogg   

原文地址:http://www.cnblogs.com/shitaotao/p/7624633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!