Maison >interface Web >js tutoriel >Comment implémenter des effets spéciaux interactifs entre vue et CSS3

Comment implémenter des effets spéciaux interactifs entre vue et CSS3

小云云original: 2018-01-18 09:51:061432parcourir

Cet article présente principalement la méthode détaillée d'utilisation de vue+css3 pour créer des effets spéciaux interactifs. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

1. Préface

Il est inévitable de développer des effets interactifs ou des effets spéciaux lors de la réalisation de projets, et les projets que j'ai récemment développés ont utilisé vue pour développer piles technologiques. Bien sûr, j'ai utilisé vue+css3 pour le développement. Au cours du processus, j'ai découvert qu'utiliser vue+css3 pour développer des effets spéciaux avait une façon de penser différente de celle de javascript/+jquery, mais c'est mieux que css3 /javascript+jqueryUn peu plus simple. Aujourd'hui, je vais partager trois exemples simples, dans l'espoir d'élargir votre réflexion et de faire comprendre à tout le monde comment vue+css3 devrait développer des effets interactifs ! Si vous avez de bonnes suggestions ou si vous pensez que j'ai fait une erreur, n'hésitez pas à le signaler ! css3

1. Bien que le code de l'article soit très simple et pas difficile à comprendre, il est recommandé de le lire en écrivant pour éviter toute confusion.

2. Les petits exemples mentionnés dans l'article sont très basiques. Vous pouvez les développer ou les modifier selon vos propres idées, ce qui peut avoir des effets inattendus. Quand j’écris ce type d’article, je veux aussi apprendre aux gens à pêcher, pas leur apprendre à pêcher !
3. Ces exemples sont tirés de mes propres projets de pratique quotidienne, et le code a été mentionné sur github (vue-demos). Bienvenue à tous dans la star.

2. L'effet de l'animation d'ouverture

L'effet de flou de l'image gif est différent de l'effet réel ! Attention à tous !

Analyse des principes

En parlant d'analyse des principes, il n'y a en fait rien à analyser, c'est-à-dire lorsque la page est dans le état suivant, remplacez le texte. Quant à voir la police se réduire en boule, c'est l'effet de contrôle de l'attribut

. Le flou de police est l'effet de contrôle de l'attribut letter-spacing ! Vous pouvez voir qu'il y a des changements progressifs, ce qui est l'effet de l'animation CSS3 (css) filter: blur()cssanimation

Analysons brièvement les étapes de cette animation. ci-dessous, il y a un total de 8 étapes dans l'animation.

Maintenant, c'est clair. Nous voulons commencer à modifier le texte au moment dans l'image ci-dessous, c'est-à-dire deux secondes après le chargement de la page, l'animation commencera à changer après avoir été exécuté deux fois. Changez ensuite le texte toutes les deux secondes jusqu'à la fin !

Les codes de deux méthodes, et

, sont donnés ci-dessous. Voyons quelle méthode est la plus simple !

vuevoie vuejavascript

voie javascript

<!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>

3 .Effet de fonctionnement du curseur de navigation

<!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>

Analyse des principes

Tout d'abord, ce qui suit est le curseur orange lorsque la page est initialisé. La position de

est placée sur le deuxième onglet. Comme vous pouvez le voir, le curseur orange est décalé vers la droite d'une distance de tabulation

Placez la souris sur le troisième onglet, et vous voyez que le curseur orange est décalé vers la droite de la distance de deux onglets

Si l'index du premier onglet au sixième onglet est 0,1,2,3,4,5.

Ensuite la formule du slider est (index * largeur de la tabulation). Comme vous pouvez le voir, l'effet qui passe progressivement est en fait l'effet de la transition CSS3 (

). Il suffit de regarder le code ci-dessous, vous le comprendrez d’un coup d’œil ! Le code est le suivant :

voie vue

transition

voie javascript

<!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.Effet de fonctionnement du graphique carrousel

<!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>

Analyse des principes

La boîte bleue est li, la boîte noire est pÉtat d'initialisation

Lors de l'affichage de la deuxième image

看到上面，其实也就是控制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开发特效的。今天讲这三个小实例不是说给大家代码，让大家复制粘贴使用，而是希望能起到一个抛砖引玉的作用，拓展思维的作用！

Articles Liés

Voir plus