Vue过渡动画代码实例

vue中v-show，v-if,动态组件 切换比较生硬。可以让他有渐隐渐出的效果

css

<template>
  <p>
      <transition name="fade" mode="out-in">  <!--动画效果：先出后进-->
              <p v-show="show">切换和显示</p>
      </transition>
      <button @click="toggle">切换</button>
 </p>
</template>
 
 
<script>
      export default {
            data(){
                  return {
                        show:true
                  }
            },
            methods:{
                  toggle(){
                        this.show = !this.show
                  }
            } 
    }
</script>
<style>    //两种效果，一种渐隐渐出，一种上下渐隐渐出
  .fade-enter-active,.fade-leave-active{
    transition: all 0.5s;
  }
  .fade-enter,.fade-leave.active{
    opacity: 0;
  }
 
  .trans-enter-active,.trans-leave-active{
    transition: all 0.5s;
  }
  .trans-enter{
    transform: translateY(-500px);
    opacity: 0;
  }
  .trans-leave-active{
    transform: translateY(500px);
    opacity: 0;
  }
 
</style>