vue中重要的属性

动态css

:class="{'enterPic':item.type==1}"

vm.$options

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处：

new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})

Vue中的动画

.v-leave-to,
.v-enter{
  opacity:0; 
}
.v-enter-active,
.v-leave-active
{
  transition:opacity 3s;
}

使用keyframes动画

@keyframes bound-in{
  0%{
    transform: scale(0);
  }
  50%{
    transform: scale(1.5);
  }
   100%{
    transform: scale(1);
  }
}
.v-enter-active
{
  transform-origin:left center;
  animation: bound-in 3s;
}
.v-leave-active{
  transform-origin:left center;
   animation: bound-in 3s reverse;
}

可自定义离开动画，和进入动画的名称

    <transition enter-active-class="active" leave-active-class="leave">
        <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>




@keyframes bound-in{
  0%{
    transform: scale(0);
  }
  50%{
    transform: scale(1.5);
  }
   100%{
    transform: scale(1);
  }
}
.active
{
  transform-origin:left center;
  animation: bound-in 3s;
}
.leave{
  transform-origin:left center;
   animation: bound-in 3s reverse;
}

vue使用animate.css实现动画
入场动画和出场动画的属性对应上animate的动画

npm install animate.css
import animate from "animate.css"
Vue.use(Element).use(animate)


使用

<transition enter-active-class="animate__animated animate__lightSpeedInRight"
       leave-active-class="animate__animated animate__lightSpeedOutRight">
        <div v-if="aniFlag" class="comic">哈哈哈</div>
</transition>

appear的用法和enter的用法相似，但是它只是在第一次渲染的时候才会起作用

<transition
       appear
       enter-active-class="animate__animated animate__lightSpeedInRight"
       leave-active-class="animate__animated animate__lightSpeedOutRight"
       appear-active-class="animate__animated animate__lightSpeedInRight"
       >
        <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

*也可以同时使用animate和自己定义的动画，
当两者的动画时间不一样时，可以设置type，选择是以transtion还是animation,因为animate用的是animation*

    <transition
      type="transition"
      appear
      enter-active-class="animate__animated animate__lightSpeedInRight fade-enter-active"
      leave-active-class="animate__animated animate__lightSpeedOutRight fade-leave-active"
      appear-active-class="animate__animated animate__lightSpeedInRight"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

当然我也可以自己定义动画的总时长,定义duration时长

 <transition
      :duration="5000"
      appear
      enter-active-class="animate__animated animate__swing fade-enter-active"
      leave-active-class="animate__animated animate__shakeY fade-leave-active"
      appear-active-class="animate__animated animate__swing"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

或者更复杂一些,定义入动画和出动画的时长

<transition
      :duration="{enter:5000,leave:5000}"
      appear
      enter-active-class="animate__animated animate__swing fade-enter-active"
      leave-active-class="animate__animated animate__shakeY fade-leave-active"
      appear-active-class="animate__animated animate__swing"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

Vue中的js动画与Velocity.js的结合

vue的transition也有js动画钩子函数

  <transition
     name="fade"
     @before-enter="handleBeforeEnter"
     @enter="handleEnter"
     @after-enter="handleAfterEnter"
    >
      <div v-if="aniFlag" class="comic">哈哈哈</div>
    </transition>

  // 即将显示之前的钩子函数  el是当前元素
    handleBeforeEnter(el){
     el.style.color="blue"
    },
    // 当运行动画的时候
    handleEnter(el,done){
      setTimeout(()=>{
        el.style.color="green"
      },2000)
      setTimeout(()=>{
        done() //动画执行完毕
      },4000)
    },
    // 当done执行完之后,又会触发一个钩子函数
    handleAfterEnter(el){
        el.style.color="black"
    },

同理有入场动画，还有出场动画，出场动画的钩子函数是before-leave、leave、after-leave 用法和入场钩子类似

Velocity.js的使用

import Velocity from 'velocity-animate'
Vue.prototype.Velocity = Velocity


   // 即将显示之前的钩子函数  el是当前元素
    handleBeforeEnter(el){
     el.style.opacity=0
    },
    // 当运行动画的时候
    handleEnter(el,done){
      this.Velocity(el,{opacity:1},{duration:2000,complete:done})
    },
    // 当done执行完之后,又会触发一个钩子函数
    handleAfterEnter(el){
      console.log('====================================');
      console.log('动画结束');
      console.log('====================================');
    },

多个元素动画
<--多个元素的动画 in-out先进入后隐藏 out-in先隐藏后进入-->

 <transition
    mode="out-in"
    >
      <div v-if="aniFlag" class="comic" key="1">哈哈哈</div>
      <div v-if="!aniFlag" class="comic" key="2">666</div>
    </transition>

.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 3s;
}