在vue中如何使用Velocity.js

Question

需求:在使用按下按钮后DOM元素在执行'slideDown'动画的同时,让它的透明度从1变成0.5

错误示范:
下面的效果为:按下按钮后先执行动画'slideDown'，再执行透明度从1变成0.5

let el = Dom元素
监听('click',()=>{
    Velocity(el,'slideDown')
    Velocity(el,{
        opacity:0.5
    })
})

Answer 1

• 安装依赖
  npm install velocity-animate@beta
• 页面引入
  import  Velocity from 'velocity-animate'

• 示例：

  <template>
    <!--使用Velocity实现动画-->
    <div class="donghuagouzi">
      <transition
        name="fade"
        @before-enter="handleVeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter"
      >
        <div v-show="show">hello World</div>
      </transition>
      <button @click="handleClick">toggle</button>
    </div>
  </template>
  
  <script>
    import Velocity from 'velocity-animate'
  
    export default {
      name: 'donghuagouzi',
      data () {
        return {
          show: true
        }
      },
      methods: {
        handleClick: () => {
          this.show = !this.show
        },
        handleVeforeEnter: (el) => {
         el.style.opacity = 0
        },
        handleEnter: (el, done) => {
          // Velocity(el,'slideDown');
          Velocity(el,{
              opacity:0.5,
              height: 20
          })
        },
        handleAfterEnter: () => {
          console.log('动画结束')
        }
      }
    }
  </script>
  ···    

• 线上demo地址:
  http://js.jirengu.com/juhemen...
• 效果