zoukankan      html  css  js  c++  java
  • 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>

     

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    hdu 1716 排列
    codevs 2597 团伙
    创建了一个静态数组,越界访问为什么不报错
    hdu 2083 简易版之最短距离
    hdu 2073 无限的路
    hdu 2060 Snooker
    hdu 1877
    hdu 1042 N!
    hdu 1799 循环多少次?
    百练:2972 确定进制
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/10386784.html
Copyright © 2011-2022 走看看