vue_過渡_動畫

過渡效果

<style>

.xxxx-enter-active,         // 顯示過渡

.xxxx-leave-active {        // 隱藏過渡

transition: all 1s;

}

 

// 指定隱藏時 的樣式

.xxxx-enter,        // 指定過渡

.xxxx-leave-to {        // 指定過渡

opacity: 0;

transform: translateX(50px);

}

</style>

------------------------------------------------------------------

<div id="test">

<button @click="isShow=!isShow">切換</button>

<transition name="xxxx">

<p v-show="isShow">哈哈</p>

</transition>

</div>

動畫效果

<style>

•             .dada-enter-active {
                  animation: 1s dada;
              }
              .dada-leave-active {
                  animation: 2s dada reverse;
              }
              @keyframes dada {
                  0% {
                      transform: translateX(40px);
                  }
                  50% {
                      transform: translateX(80px);
                  }
                  100% {
                      transform: translateX(0px);
                  }
              }

</style>

<div id="test">

•             <transition name="dada">
                  <p v-show="isShow">大大</p>
              </transition>

</div>