suchen

Heim >Web-Frontend >js-Tutorial >Vue realisiert das Auf- und Abscrollen von Animationsbeispielen für die Lotterie von Mobiltelefonnummern

Vue realisiert das Auf- und Abscrollen von Animationsbeispielen für die Lotterie von Mobiltelefonnummern

小云云
小云云Original
2018-05-22 09:43:415333Durchsuche

In diesem Artikel wird hauptsächlich das Beispiel vorgestellt, wie Vue eine Auf- und Ab-Scroll-Animation für die Lotterie von Mobiltelefonnummern implementiert. Es hat einen gewissen Referenzwert. Ich hoffe, es kann jedem helfen. 

<!DOCTYPE>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Document</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/mui.css" rel="external nofollow" />
  <style type="text/css">
    .in-out-translate-demo-wrapper {
      position: relative;
      height: 58px;
    }
    
    .in-out-translate-demo-wrapper button {
      position: absolute;
    }
    
    .in-out-translate-fade-enter-active,
    .in-out-translate-fade-leave-active {
      transition: all .5s;
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
    }
    
    .in-out-translate-fade-enter,
    .in-out-translate-fade-leave-active {
      opacity: 0;
    }
    
    .in-out-translate-fade-enter {
      transform: translateX(54px);
      -webkit-transform: translateX(54px);
      -moz-transform: translateX(54px);
      -o-transform: translateX(54px);
    }
    
    .in-out-translate-fade-leave-active {
      transform: translateX(-54px);
      -webkit-transform: translateX(-54px);
      -moz-transform: translateX(-54px);
      -o-transform: translateX(-54px);
    }
    
    .down-up-translate-fade-enter-active,
    .down-up-translate-fade-leave-active {
      transition: all .1s;
      -webkit-transition: all .1s;
      -moz-transition: all .1s;
      -o-transition: all .1s;
    }
    
    .down-up-translate-fade-enter,
    .down-up-translate-fade-leave-active {
      opacity: 1;
    }
    
    .down-up-translate-fade-enter {
      /*transform: translateY(40px);
      -webkit-transform: translateY(40px);
      -moz-transform: translateY(40px);
      -o-transform: translateY(40px);*/
    }
    
    .down-up-translate-fade-leave-active {
      transform: translateY(-50px);
      -webkit-transform: translateY(-50px);
      -moz-transform: translateY(-50px);
      -o-transform: translateY(-50px);
    }
    
    .num {
      /*position: relative;*/
      width: 100%;
      height: 50px;
      overflow: hidden;
    }
    
    .num .span {
      /*position: absolute;*/
      background: #0062CC;
      color: #fff;
      width: 30px;
      height: 50px;
      line-height: 50px;
      font-size: 40px;
      font-weight: bold;
      float: left;
      margin-right: 2px;
    }
    
    .num .span p {
      background: #0062CC;
      color: #fff;
      width: 30px;
      height: 50px;
      line-height: 50px;
      font-size: 40px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <p id="demo" class="demo">
    <p class="in-out-translate-demo-wrapper mui-text-center">
      <transition name="in-out-translate-fade">
        <button v-if="show" v-on:click="start" key="start" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始</button>
        <button v-else key="end" v-on:click="end" type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">结束</button>
      </transition>

    </p>
    <p class="num mui-text-center">
      <p class="span">
        <p>1</p>
      </p>       
      <p class="span">
        <transition name="down-up-translate-fade">
          <p :key="i">{{i}}</p>
        </transition>
      </p>
      <p class="span">
        <transition name="down-up-translate-fade">
          <p :key="j">{{j}}</p>
        </transition>
      </p>
      <p class="span">
        <p>*</p>
      </p>
      <p class="span">
        <p>*</p>
      </p> 
      <p class="span">
        <p>*</p>
      </p> 
      <p class="span">
        <p>*</p>
      </p>         
      <p class="span">
        <transition name="down-up-translate-fade">
          <p :key="k">{{k}}</p>
        </transition>
      </p>
      <p class="span">
        <transition name="down-up-translate-fade">
          <p :key="l">{{l}}</p>
        </transition>
      </p> 
      <p class="span">
        <transition name="down-up-translate-fade">
          <p :key="i">{{i}}</p>
        </transition>
      </p>
      <p class="span">
        <transition name="down-up-translate-fade">
          <p :key="j">{{j}}</p>
        </transition>
      </p>       
    </p>
  </p>
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>-->
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    
    new Vue({
      el: &#39;#demo&#39;,
      data: {
        show: true,
        i: 0,
        j:0,
        k: 0,
        l: 0,
        interval: null
      },
      methods: {
        start: function() {
          this.show = !this.show
          var _this = this;

          if(!this.interval) {
            this.interval = setInterval(function() {
              _this.i = Math.floor(Math.random() * 10);
              _this.j = Math.floor(Math.random() * 10);
              _this.k = Math.floor(Math.random() * 10);
              _this.l = Math.floor(Math.random() * 10);
            }, 10)
          }
        },
        end: function() {
          this.show = !this.show

          clearInterval(this.interval)
          this.interval = null
        }
      }
    })
  </script>
</body>

Verwandte Empfehlungen:

Beispiel einer PHP-Lotteriefunktion

Beispiel einer PHP-, jQuery- und MySQL-Implementierung der Lotterie Programm

Beispiel teilen, wie PHP einen Algorithmus zur Berechnung der Lotteriewahrscheinlichkeit implementiert

Das obige ist der detaillierte Inhalt vonVue realisiert das Auf- und Abscrollen von Animationsbeispielen für die Lotterie von Mobiltelefonnummern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php mysql jquery 算法
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung einiger Vorsichtsmaßnahmen für den JS-Sprung zur mobilen Website-URLNächster Artikel：Ausführliche Erläuterung einiger Vorsichtsmaßnahmen für den JS-Sprung zur mobilen Website-URL

In Verbindung stehende Artikel

Mehr sehen