Transition 过渡动画

fade 淡入淡出

<template>
  <div>
    <plv-button @click="visible = !visible">触发动画</plv-button>
    <div class="transition-wrap">
      <transition name="plv-fade-in-linear">
        <div class="transition-box" v-show="visible">plv-fade-in-linear</div>
      </transition>
      <transition name="plv-fade-in-linear-faster">
        <div class="transition-box" v-show="visible">plv-fade-in-linear-faster</div>
      </transition>
      <transition name="plv-fade-in">
        <div class="transition-box" v-show="visible">plv-fade-in</div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: true
      };
    }
  };
</script>

显示代码

zoom 缩放

<template>
  <div>
    <plv-button @click="visible = !visible">触发动画</plv-button>
    <div class="transition-wrap">
      <transition name="plv-zoom-in-top">
        <div class="transition-box" v-show="visible">plv-zoom-in-top</div>
      </transition>
      <transition name="plv-zoom-in-bottom">
        <div class="transition-box" v-show="visible">plv-zoom-in-bottom</div>
      </transition>
      <transition name="plv-zoom-in-left">
        <div class="transition-box" v-show="visible">plv-zoom-in-left</div>
      </transition>
      <transition name="plv-zoom-in-right">
        <div class="transition-box" v-show="visible">plv-zoom-in-right</div>
      </transition>
    </div>
    <div class="transition-wrap">
      <transition name="plv-zoom-in-top-left">
        <div class="transition-box" v-show="visible">plv-zoom-in-top-left</div>
      </transition>
      <transition name="plv-zoom-in-top-right">
        <div class="transition-box" v-show="visible">plv-zoom-in-top-right</div>
      </transition>
      <transition name="plv-zoom-in-bottom-left">
        <div class="transition-box" v-show="visible">plv-zoom-in-bottom-left</div>
      </transition>
      <transition name="plv-zoom-in-bottom-right">
        <div class="transition-box" v-show="visible">plv-zoom-in-bottom-right</div>
      </transition>
    </div>
    <div class="transition-wrap">
      <transition name="plv-zoom-in-center">
        <div class="transition-box" v-show="visible">plv-zoom-in-center</div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: true
      };
    }
  };
</script>

显示代码

collapse 展开

<template>
  <div>
    <plv-button @click="visible = !visible">触发动画</plv-button>
    <div class="transition-wrap">
      <plv-collapse-transition>
        <div class="transition-box" v-show="visible">plv-fade-in-linear</div>
      </plv-collapse-transition>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: true
      };
    }
  };
</script>

显示代码