Vue.js之js实现过渡-js教程-PHP中文网

Vue.js之js实现过渡

php中世界最好的语言

发布： 2018-03-13 14:26:03

原创

1276人浏览过

这次给大家带来Vue.js之js实现过渡，使用Vue.js的js实现过渡的注意事项有哪些，下面就是实战案例，一起来看一下。

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <div class="ab">
      <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @leave="leave"
        :css="false"
      >
        <p class="animate-p" v-show="show">i am show</p>
      </transition>
    </div>
  </div></template><script>
  import comA from './components/a.vue'
  import comB from './components/b.vue'
  export default {    components: {comA, comB},
    data () {      
return
 {        show: true
      }
    },    methods: {//      
动画
执行的起始位置
      beforeEnter: function (el) {
        $(el).css({          left: '50px',          opacity: 0
        })
      },      enter: function (el, done) {
        $(el).animate({          left: '200px',          opacity: 1
        }, {          duration: 1500,          complete: done
        })
      },      leave: function (el, done) {
        $(el).animate({          left: '500px',          opacity: 0
        }, {          duration: 1500,          complete: done
        })
      }
    }
  }</script><style>.animate-p {  
position
: absolute;  top: 100px;  left: 0;
}</style>

登录后复制

当让标签隐藏时,执行的是leave动画;
当让标签显示时,执行的是beforeEnter,enter动画

js过渡动画

在学习饿了么外卖app时,发现这样写也可以,
给要执行动画的标签添加transition

<div v-show="detailShow" class="detail" transition="fade">

登录后复制

在CSS代码中

   .detail
      ......
      &.fade-transition
        opacity: 1        background: rgba(7, 17, 27, 0.8)
      &.fade-enter,&.fade-leave
        opacity: 0        background: rgba(7, 17, 27, 0)

登录后复制

这样就可以简单的实现一个背景透明度过度的动画

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！