vue过渡动画tranistion(js过渡)

责编:menVScode 2018-01-29 0:56 阅读(1141)

        vue过渡动画tranistion(css过渡)

        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"

  v-bind:css="false"
>
  <!-- ... -->
</transition>

        JavaScript 过渡的元素要添加 v-bind:css="false",Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

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

        当只用 JavaScript 过渡的时候, 在 enter 和 leave 中,回调函数 done 是必须的 。否则,它们会被同步调用,过渡会立即完成。

        参数el:transition标签包含的dom节点;

<template>
  <div id="app">
    <button @click="show=!show">显/隐</button>
    <div class="box">
      <transition mode="out-in"
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
        :css="false">
        <p class="content" v-show="show">内容内容内容</p>
      </transition>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){
    return { show:true }
  },
  methods:{
    beforeEnter:function(el){
      $(el).css({
        left:'-500px',
        opacity:0
      })
    },
    enter:function(el,done){
      $(el).animate({
        left:0,
        opacity:1
      },{
        duration:1500,
        complete:done
      })
    },
    leave:function(el,done){
      $(el).animate({
        left:'500px',
        opacity:0
      },{
        duration:1500,
        complete:done
      })
    }
  }
}
</script>
<style>
.content{
  position:absolute;
  top:150px;
  left:0;
}
</style>
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码