Heim > Artikel > Web-Frontend > Detaillierte Erklärung, wie Vue und CSS3 interaktive Effekte implementieren

Detaillierte Erklärung, wie Vue und CSS3 interaktive Effekte implementieren

小云云Original: 2017-12-18 14:59:481618Durchsuche

In diesem Artikel wird hauptsächlich die detaillierte Methode zur Verwendung von vue + css3 zum Erstellen interaktiver Spezialeffekte vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Vorwort

Bei der Durchführung von Projekten ist es unvermeidlich, interaktive Effekte oder Spezialeffekte zu entwickeln, und die Projekte, die ich kürzlich entwickelt habe, wurden mit vue entwickelt Technologie-Stacks. Natürlich habe ich zum Entwickeln vue+css3 verwendet. Dabei habe ich festgestellt, dass die Verwendung von vue+css3 eine andere Denkweise hat als javascript/jquery+css3, aber es ist besser als javascript /jquery+css3Ein bisschen einfacher. Heute werde ich drei einfache Beispiele vorstellen, in der Hoffnung, Ihr Denken zu erweitern und allen verständlich zu machen, wie vue + css3 interaktive Effekte entwickeln sollte! Wenn Sie gute Vorschläge haben oder glauben, dass ich einen Fehler gemacht habe, weisen Sie mich bitte darauf hin!

1. Obwohl der Code im Artikel sehr einfach und nicht schwer zu verstehen ist, wird empfohlen, ihn beim Schreiben zu lesen, um Verwirrung zu vermeiden.
2. Die im Artikel erwähnten kleinen Beispiele sind sehr einfach. Sie können sie nach Ihren eigenen Vorstellungen erweitern oder ändern, was unerwartete Auswirkungen haben kann. Wenn ich diese Art von Artikeln schreibe, möchte ich den Menschen auch das Angeln beibringen, und nicht ihnen das Angeln beibringen!
3. Diese Beispiele stammen aus meinen eigenen täglichen Übungsprojekten und der Code wurde auf Github (vue-demos) erwähnt. Begrüßen Sie alle zum Star.

2. Der Effekt der Eröffnungsanimation

Der Unschärfeeffekt des GIF-Bildes sieht anders aus als der tatsächliche Effekt! Achtung an alle!

Prinzipanalyse

Apropos Prinzipanalyse: Es gibt eigentlich nichts zu analysieren, das heißt, wenn sich die Seite im befindet Ersetzen Sie im folgenden Zustand den Text. Was das Schrumpfen der Schrift zu einer Kugel betrifft, so ist dies der Kontrolleffekt des letter-spacing-Attributs. Schriftunschärfe ist der Kontrolleffekt des css-Attributs! Sie können sehen, dass es allmähliche Änderungen gibt, was der Effekt der CSS3-Animation ist (filter: blur()) cssanimation

Lassen Sie uns die Schritte dieser Animation kurz analysieren Unten ist dies Die Animation besteht aus insgesamt 8 Schritten.

Jetzt ist klar, dass wir in dem Moment im Bild unten mit der Änderung des Textes beginnen wollen, d. h. zwei Sekunden nach dem Laden der Seite beginnt die Animation Änderung nach zweimaliger Ausführung von Word. Dann ändern Sie den Text alle zwei Sekunden bis zum Ende!

Die Codes für zwei Methoden,

und

, sind unten aufgeführt. vuejavascriptVue-Methode

Javascript-Methode

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body{
    background: #ccc;
  }
  h1 {
    color: white;
    text-transform: uppercase;
    margin-top: 100px;
    text-align: center;
    font-size: 6rem;
    line-height: 1;
    animation: letterspacing 1s 7 alternate ease-in-out;
    display: block;
    letter-spacing: .5rem;
  }

  @keyframes letterspacing {
    0% {
      letter-spacing: -72px;
      filter: blur(20px);
    }

    40% {
      filter: blur(6px);
    }

    80% {
      letter-spacing: 8px;
      filter: blur(0);
    }
  }
</style>
<body>
<p id="text">
  <h1>{{testText}}</h1>
</p>
</body>
<script src="vue.min.js"></script>
<script type="text/javascript">
  new Vue({
    el:&#39;#text&#39;,
    data:{
      nowIndex:0,
      testText:&#39;欢迎浏览&#39;
    },
    mounted(){
      let _this=this;
      let timer = setInterval(function(){
        _this.nowIndex++;
        switch (_this.nowIndex) {
          case 1:
            _this.testText = &#39;守候的文章&#39;;
            break;
          case 2:
            _this.testText = &#39;愿您浏览愉快&#39;;
            break;
          case 3:
            _this.testText = &#39;学到知识&#39;;
            break;
        }
        if (_this.nowIndex > 3) {
          setTimeout(() => {
            clearInterval(timer);
          }, 2000)
        }
      }, 2000)
    }
  })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body{
    background: #ccc;
  }
  h1 {
    color: white;
    text-transform: uppercase;
    margin-top: 100px;
    text-align: center;
    font-size: 6rem;
    line-height: 1;
    animation: letterspacing 1s 7 alternate ease-in-out;
    display: block;
    letter-spacing: .5rem;
  }

  @keyframes letterspacing {
    0% {
      letter-spacing: -6rem;
      filter: blur(1rem);
    }

    40% {
      filter: blur(.3rem);
    }

    80% {
      letter-spacing: .5rem;
      filter: blur(0rem);
    }
  }
</style>
<body>
<p id="text">
  <h1>欢迎浏览</h1>
</p>
</body>
<script>
  var oH1=document.querySelector(&#39;h1&#39;),nowIndex=0;
  console.log(oH1)
  var timer = setInterval(function () {
    nowIndex++;
    switch (nowIndex) {
      case 1:
        oH1.innerHTML = &#39;守候的文章&#39;;
        break;
      case 2:
        oH1.innerHTML = &#39;愿您浏览愉快&#39;;
        break;
      case 3:
        oH1.innerHTML = &#39;学到知识&#39;;
        break;
    }
    if (nowIndex > 3) {
      setTimeout(() => {
        clearInterval(timer);
      }, 2000)
    }
  }, 2000)
</script>
</html>

3 .Navigationsschieberegler-Bedienungseffekt

Prinzipielle Analyse

Das Folgende ist zunächst der orangefarbene Schieberegler, wenn die Seite angezeigt wird Die Position von

wird auf der zweiten Registerkarte platziert. Wie Sie sehen können, wird der orangefarbene Schieberegler um einen Tabulatorabstand nach rechts verschoben >

Setzen Sie die Maus auf den dritten Tab, und Sie können sehen, dass der orangefarbene Schieberegler um den Abstand von zwei Tabs nach rechts versetzt ist

Wenn der Index vom ersten bis zum sechsten Tab 0,1,2,3,4,5 ist.

Dann lautet die Formel des Schiebereglers (Index * Breite der Registerkarte). Wie Sie sehen können, ist der Effekt, der allmählich vorübergeht, tatsächlich der Effekt des CSS3-Übergangs (

). Schauen Sie sich einfach den Code unten an, Sie werden ihn auf einen Blick verstehen! Der Code lautet wie folgt:

vue way

transition

javascript way

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<style>
  .nav{
    margin: 40px;
    position: relative;
  }
.nav li{
  float: left;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  background: #09f;
  cursor: pointer;
}
  .nav span{
    position: relative;
    z-index: 2;
  }
  .nav .slider{
    position: absolute;
    transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38);
    width: 100px;
    height: 40px;
    background: #f90;
    top: 0;
    left: 0;
    z-index: 1;
  }
</style>
<body>
<p class="nav clear" id="nav" @mouseleave="nowIndex=0">
  <ul>
    <li @mouseenter.stop="nowIndex=0"><span>Tab One</span></li>
    <li @mouseenter.stop="nowIndex=1"><span>Tab Two</span></li>
    <li @mouseenter.stop="nowIndex=2"><span>Tab Three</span></li>
    <li @mouseenter.stop="nowIndex=3"><span>Tab four</span></li>
    <li @mouseenter.stop="nowIndex=4"><span>Tab five</span></li>
    <li @mouseenter.stop="nowIndex=5"><span>Tab six</span></li>
  </ul>
  <p class="slider" :style="{&#39;transform&#39;:&#39;translate3d(&#39;+nowIndex*100+&#39;px,0,0)&#39;}"></p>
</p>
</body>
<script src="vue.min.js"></script>
<script type="text/javascript">
  new Vue({
    el:&#39;#nav&#39;,
    data:{
      nowIndex:0
    }
  })
</script>
</html>

4 .Karusselldiagramm-Betriebseffekt

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<style>
  .nav{
    position: relative;
  }
.nav li{
  float: left;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  background: #09f;
  cursor: pointer;
}
  .nav span{
    position: relative;
    z-index: 2;
  }
  .nav .slider{
    position: absolute;
    transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38);
    width: 100px;
    height: 40px;
    background: #f90;
    top: 0;
    left: 0;
    z-index: 1;
  }
</style>
<body>
<p class="nav clear" id="nav">
  <ul>
    <li><span>Tab One</span></li>
    <li><span>Tab Two</span></li>
    <li><span>Tab Three</span></li>
    <li><span>Tab four</span></li>
    <li><span>Tab five</span></li>
    <li><span>Tab six</span></li>
  </ul>
  <p class="slider"></p>
</p>
</body>
<script type="text/javascript">
  var op=document.querySelector("#nav"),oLi=op.querySelectorAll("li"),oSlider=document.querySelector(".slider");
  op.addEventListener("mouseleave",function () {
    oSlider.style.transform=&#39;translate3d(0,0,0)&#39;;
  })
  for(var i=0;i<oLi.length;i++){
    oLi[i].index=i;
    oLi[i].addEventListener("mouseenter",function (e) {
      oSlider.style.transform=&#39;translate3d(&#39;+this.index*100+&#39;px,0,0)&#39;;
    })
  }
</script>
</html>

Prinzipanalyse

Die blaue Box ist li, die schwarze Box ist pInitialisierungsstatus

Bei der Anzeige des zweiten Bildes

看到上面，其实也就是控制ul的偏移量（transform:translate3d）。计算公式和上面的滑块相似，索引（0|1|2|3）*li的宽度。不同的就是，ul的偏移量是取负数，因为ul是想左偏，上面的滑块是向右偏！
当第一张图片的时候，ul偏移量设置（transform: translate3d(0px, 0px, 0px)）。
当第二张图片的时候，ul偏移量设置（transform: translate3d(-1000px, 0px, 0px)）。
当第二张图片的时候，ul偏移量设置（transform: translate3d(-2000px, 0px, 0px)）。以此类推，偏移量很简单的就能计算出来！

可能我说的大家有点懵，但是，看下面的代码，就不会懵了，因为代码也很简单！

vue方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <style>
    .slide-img {
      width: 1000px;
      height: 500px;
      overflow: hidden;
      position: relative;
      margin: 20px auto;
    }

    ul {
      transition: all .5s ease;
    }

    li {
      float: left;
    }

    .slide-arrow p {
      width: 50px;
      height: 100px;
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg") no-repeat;
    }

    .arrow-right {
      transform: rotate(180deg);
      right: 0;
    }

    .arrow-left {
      left: 0;
    }
    .slide-option{
      position: absolute;
      bottom: 10px;
      width: 100%;
      left: 0;
      text-align: center;
    }
    .slide-option span{
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 100%;
      background: #ccc;
      margin: 0 10px;
    }
    .slide-option .active{
      background: #09f;
    }
  </style>
</head>
<body>
<p class="slide-img clear" id="slide-img">
  <!--用tran这个class控制ul是否含有过渡效果，样式已经写好-->
  <ul :style="{&#39;width&#39;:(listWidth*list.length)+&#39;px&#39;,&#39;transform&#39;:&#39;translate3d(-&#39;+(listWidth*nowIndex)+&#39;px,0,0)&#39;}">
    <!--遍历出来的图片-->
    <li v-for="(li,index) in list" :style="{&#39;width&#39;:listWidth+&#39;px&#39;}">
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
        <img :src="li" class="slider-img"/>
      </a>
    </li>
  </ul>
  <p class="slide-option">
    <span v-for="(li,index) in list" :class="{&#39;active&#39;:index===nowIndex}"></span>
  </p>
  <p class="slide-arrow">
    <p class="arrow-left" @click.stop="switchDo(&#39;reduce&#39;)"></p>
    <p class="arrow-right" @click.stop="switchDo"></p>
  </p>
</p>
</body>
<script src="vue.min.js"></script>
<script type="text/javascript">
  new Vue({
    el: &#39;#slide-img&#39;,
    data: {
      nowIndex: 0,
      listWidth: &#39;1000&#39;,
      list: [&#39;./images/timg1.jpg&#39;, &#39;./images/timg2.jpg&#39;, &#39;./images/timg3.jpg&#39;, &#39;./images/timg4.jpg&#39;],
      timer:null
    },
    methods: {
      //滑动操作
      switchDo(reduce){
        clearInterval(this.timer);
        //根据reduce判断this.nowIndex的增加或者减少！
        if(reduce===&#39;reduce&#39;){
          //如果是第一张，就返回最后一张
          if(this.nowIndex===0){
            this.nowIndex=this.list.length-1;
          }
          else{
            this.nowIndex--;
          }
        }
        else{
          //如果是最后一张，就返回第一张
          if(this.nowIndex===this.list.length-1){
            this.nowIndex=0;
          }
          else{
            this.nowIndex++;
          }
        }
        var _this=this;
        this.timer=setInterval(function () {
          _this.switchDo();
        },4000)

      },
    },
    mounted(){
      var _this=this;
      this.timer=setInterval(function () {
        _this.switchDo();
      },4000)
    }
  })
</script>
</html>

javascript方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="reset.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
  <style>
    .slide-img {
      width: 1000px;
      height: 500px;
      overflow: hidden;
      position: relative;
      margin: 20px auto;
    }

    ul {
      transition: all .5s ease;
    }

    li {
      float: left;
    }

    .slide-arrow p {
      width: 50px;
      height: 100px;
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg") no-repeat;
    }

    .arrow-right {
      transform: rotate(180deg);
      right: 0;
    }

    .arrow-left {
      left: 0;
    }
    .slide-option{
      position: absolute;
      bottom: 10px;
      width: 100%;
      left: 0;
      text-align: center;
    }
    .slide-option span{
      display: inline-block;
      width: 14px;
      height: 14px;
      border-radius: 100%;
      background: #ccc;
      margin: 0 10px;
    }
    .slide-option .active{
      background: #09f;
    }
  </style>
</head>
<body>
<p class="slide-img clear" id="slide-img">
  <!--用tran这个class控制ul是否含有过渡效果，样式已经写好-->
  <ul id="slide-img-ul">
    <!--遍历出来的图片-->
    <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg1.jpg" class="slider-img"/></a></li>
    <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg2.jpg" class="slider-img"/></a></li>
    <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg3.jpg" class="slider-img"/></a></li>
    <li style="width: 1000px;"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/timg4.jpg" class="slider-img"/></a></li>
  </ul>
  <p class="slide-option">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </p>
  <p class="slide-arrow">
    <p class="arrow-left"></p>
    <p class="arrow-right"></p>
  </p>
</p>
</body>
<script type="text/javascript">
  window.onload=function () {
    var oUl=document.querySelector(&#39;#slide-img-ul&#39;);
    var oLi=oUl.querySelectorAll(&#39;li&#39;);
    var oSpan=document.querySelector(&#39;.slide-option&#39;).querySelectorAll(&#39;span&#39;);
    var oArrowLeft=document.querySelector(&#39;.arrow-left&#39;);
    var oArrowRight=document.querySelector(&#39;.arrow-right&#39;);
    oUl.style.width=&#39;4000px&#39;;
    oArrowLeft.addEventListener(&#39;click&#39;,function () {
      switchDo(&#39;reduce&#39;);
    })
    oArrowRight.addEventListener(&#39;click&#39;,function () {
      switchDo();
    })
    var timer=null,nowIndex=0;
    function switchDo(reduce){
      clearInterval(timer);
      //设置样式
      oUl.style.transform=&#39;translate3d(-&#39;+(1000*nowIndex)+&#39;px,0,0)&#39;;
      for (var i=0;i<oSpan.length;i++){
        if(i===nowIndex){
          oSpan[i].className=&#39;active&#39;;
        }
        else{
          oSpan[i].className=&#39;&#39;;
        }
      }
      //根据reduce判断this.nowIndex的增加或者减少！
      if(reduce===&#39;reduce&#39;){
        //如果是第一张，就返回最后一张
        if(nowIndex===0){
          nowIndex=oLi.length-1;
        }
        else{
          nowIndex--;
        }
      }
      else{
        //如果是最后一张，就返回第一张
        if(nowIndex===oLi.length-1){
          nowIndex=0;
        }
        else{
          nowIndex++;
        }
      }
      timer=setInterval(function () {
        switchDo();
      },4000)
    }
    switchDo();
  }
</script>
</html>

5.小结

好了，关于vue+css3开发的特效，以及和javascript+css3的对比，就说到这里了，希望这几个小实例，能帮到大家了解下应该怎么使用vue+css3开发特效的。

In Verbindung stehende Artikel

Mehr sehen