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>