zoukankan      html  css  js  c++  java
  • @keyframes动画和animate.css

     <style>
          @keyframes bounce-in {
            0%{
              transform: scale(0);
            }
            50%{
              transform: scale(1.5);
            }
            100%{
              transform: scale(1);
            }
          }
          .fade-enter-active{
            transform-origin: left center;
           animation: bounce-in 1s;
          }
          .fade-leave-active{
            transform-origin: left center;
            animation: bounce-in 1s reverse;
          }
      </style>
    </head>
    <body>
      <!-- 
        过程如下:
         显示  fade-enter,fade-enter-active      fade-enter-active,fade-enter-to     空
         隐藏  fade-leave,fade-leave-active      fade-leave-active,fade-leave-to     空
      -->
      <div id="root">
        <transition name='fade'>
          <h1 v-show='show'>
            最是年少时模样
          </h1>
        </transition>
        <button @click='change'>切换</button>
      </div>
      <script>
        var vm=new Vue({
          el:'#root',
          data:{
            show:true
          },
          methods:{
            change:function(){
              this.show=!this.show;
            }
          }
        })
      </script>
    </body>

    自定义类名:

    <style>
          @keyframes bounce-in {
            0%{
              transform: scale(0);
            }
            50%{
              transform: scale(1.5);
            }
            100%{
              transform: scale(1);
            }
          }
          .active{
            transform-origin: left center;
           animation: bounce-in 1s;
          }
          .leave{
            transform-origin: left center;
            animation: bounce-in 1s reverse;
          }
      </style>
    </head>
    <body>
      <!-- 
        过程如下:
         显示  fade-enter,fade-enter-active      fade-enter-active,fade-enter-to     空
         隐藏  fade-leave,fade-leave-active      fade-leave-active,fade-leave-to     空
      -->
      <div id="root">
        <transition name='fade' 
          enter-active-class='active'
          leave-active-class='leave'
        >
          <h1 v-show='show'>
            最是年少时模样
          </h1>
        </transition>
        <button @click='change'>切换</button>
      </div>
      <script>
        var vm=new Vue({
          el:'#root',
          data:{
            show:true
          },
          methods:{
            change:function(){
              this.show=!this.show;
            }
          }
        })
      </script>
    </body>

    animate.css使用:

      <script src="./node_modules/vue/dist/vue.js"></script>
      <link rel='stylesheet' type="text/css" href="./animate.css">
    </head>
    <body>
      <!-- 
        过程如下:
         显示  fade-enter,fade-enter-active      fade-enter-active,fade-enter-to     空
         隐藏  fade-leave,fade-leave-active      fade-leave-active,fade-leave-to     空
      -->
      <div id="root">
        <transition name='fade' 
          enter-active-class='animated tada'
          leave-active-class='animated rubberBand'
        >
          <h1 v-show='show'>
            最是年少时模样
          </h1>
        </transition>
        <button @click='change'>切换</button>
      </div>
      <script>
        var vm=new Vue({
          el:'#root',
          data:{
            show:true
          },
          methods:{
            change:function(){
              this.show=!this.show;
            }
          }
        })
      </script>
    </body>
  • 相关阅读:
    CF 1119 题解
    CF 582 题解
    CF 1098 题解
    CF 1129 题解
    CF 513 题解
    CF 417 D 题解
    ingress nginx遇到502错误,connect() failed (113 Host is unreachable) while connecting to upstream
    MySQL性能剖析
    MySQL的基准测试
    MySQL架构与历史
  • 原文地址:https://www.cnblogs.com/em2464/p/12333032.html
Copyright © 2011-2022 走看看