也许vue+css3做交互特效更简单

开发 前端
今天就分享三个简单的小实例,希望能起到拓展思维的作用,让大家明白vue+css3应该怎样开发交互效果!如果大家有什么好的建议,或者觉得我哪里写错了,欢迎指出!
 

1、前言

做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用vue,开发技术栈方面,理所当然就使用了vue+css3开发,过程中发现使用vue+css3开发特效,和javascript/jquery+css3的思维方式不一样,但是比javascript/jquery+css3简单一点点。今天就分享三个简单的小实例,希望能起到拓展思维的作用,让大家明白vue+css3应该怎样开发交互效果!如果大家有什么好的建议,或者觉得我哪里写错了,欢迎指出!

    1.文章上面的代码,虽然代码很简单,不难理解,但是也是建议大家边写边看,这样不会混乱。

    2.文章所提及的小实例,都是很基础的,大家可以参照自己的想法进行扩展,或者修改,可能会有意想不到的效果。我写这类型的文章也是想授人以渔,不是授人以鱼!

    3.这几个实例,摘自我自己的平常练习的项目,代码已经提到github上面了(vue-demos)。欢迎大家star。

2、开场小动画

运行效果

gif图模糊效果看着跟实际效果不太一样!大家注意!

原理分析

说到原理分析,其实也没什么可以分析的,就是在页面是下面这个状态的时候,把文字替换掉。至于看到字体缩成一团,就是letter-spacing这个css属性的控制效果。字体模糊就是filter: blur()这个css属性的控制效果!看到有逐渐的变化,就是css3动画(animation)的效果

下面简单分析下,这个动画的几个步骤,从下面看到,这个动画一共8个步骤。

这下就清晰明了了,我们要在下图这个瞬间开始改变文字,也就是页面加载了两秒后,动画执行了两次后就开始改变文字。然后每隔两秒改变一次文字,直到最后!

下面给出vue和javascript两种方式的代码,看下哪种方式更加的简单!

vue方式

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>Title</title> 
  6. </head> 
  7. <style> 
  8.     body{ 
  9.         background: #ccc; 
  10.     } 
  11.     h1 { 
  12.         color: white; 
  13.         text-transform: uppercase; 
  14.         margin-top: 100px; 
  15.         text-align: center; 
  16.         font-size: 6rem; 
  17.         line-height: 1; 
  18.         animation: letterspacing 1s 7 alternate ease-in-out
  19.         display: block; 
  20.         letter-spacing: .5rem; 
  21.     } 
  22.  
  23.     @keyframes letterspacing { 
  24.         0% { 
  25.             letter-spacing: -72px; 
  26.             filter: blur(20px); 
  27.         } 
  28.  
  29.         40% { 
  30.             filter: blur(6px); 
  31.         } 
  32.  
  33.         80% { 
  34.             letter-spacing: 8px; 
  35.             filter: blur(0); 
  36.         } 
  37.     } 
  38. </style> 
  39. <body> 
  40. <div id="text"
  41.     <h1>{{testText}}</h1> 
  42. </div> 
  43. </body> 
  44. <script src="vue.min.js"></script> 
  45. <script type="text/javascript"
  46.     new Vue({ 
  47.         el:'#text'
  48.         data:{ 
  49.             nowIndex:0, 
  50.             testText:'欢迎浏览' 
  51.         }, 
  52.         mounted(){ 
  53.             let _this=this; 
  54.             let timer = setInterval(function(){ 
  55.                 _this.nowIndex++; 
  56.                 switch (_this.nowIndex) { 
  57.                     case 1: 
  58.                         _this.testText = '守候的文章'
  59.                         break; 
  60.                     case 2: 
  61.                         _this.testText = '愿您浏览愉快'
  62.                         break; 
  63.                     case 3: 
  64.                         _this.testText = '学到知识'
  65.                         break; 
  66.                 } 
  67.                 if (_this.nowIndex > 3) { 
  68.                     setTimeout(() => { 
  69.                         clearInterval(timer); 
  70.                     }, 2000) 
  71.                 } 
  72.             }, 2000) 
  73.         } 
  74.     }) 
  75. </script> 
  76. </html> 

javascript方式

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>Title</title> 
  6. </head> 
  7. <style> 
  8.     body{ 
  9.         background: #ccc; 
  10.     } 
  11.     h1 { 
  12.         color: white; 
  13.         text-transform: uppercase; 
  14.         margin-top: 100px; 
  15.         text-align: center; 
  16.         font-size: 6rem; 
  17.         line-height: 1; 
  18.         animation: letterspacing 1s 7 alternate ease-in-out
  19.         display: block; 
  20.         letter-spacing: .5rem; 
  21.     } 
  22.  
  23.     @keyframes letterspacing { 
  24.         0% { 
  25.             letter-spacing: -6rem; 
  26.             filter: blur(1rem); 
  27.         } 
  28.  
  29.         40% { 
  30.             filter: blur(.3rem); 
  31.         } 
  32.  
  33.         80% { 
  34.             letter-spacing: .5rem; 
  35.             filter: blur(0rem); 
  36.         } 
  37.     } 
  38. </style> 
  39. <body> 
  40. <div id="text"
  41.     <h1>欢迎浏览</h1> 
  42. </div> 
  43. </body> 
  44. <script> 
  45.     var oH1=document.querySelector('h1'),nowIndex=0; 
  46.     console.log(oH1) 
  47.     var timer = setInterval(function () { 
  48.         nowIndex++; 
  49.         switch (nowIndex) { 
  50.             case 1: 
  51.                 oH1.innerHTML = '守候的文章'
  52.                 break; 
  53.             case 2: 
  54.                 oH1.innerHTML = '愿您浏览愉快'
  55.                 break; 
  56.             case 3: 
  57.                 oH1.innerHTML = '学到知识'
  58.                 break; 
  59.         } 
  60.         if (nowIndex > 3) { 
  61.             setTimeout(() => { 
  62.                 clearInterval(timer); 
  63.             }, 2000) 
  64.         } 
  65.     }, 2000) 
  66. </script> 
  67. </html> 

3、导航滑块

运行效果

原理分析

首先,下面是页面初始化的时候,橙色滑块的位置

鼠标放到第二个tab上面,大家可以看到,橙色滑块就是向右偏移了一个tab的距离

鼠标放到第三个tab上面,大家可以看到,橙色滑块就是向右偏移了两个tab的距离

如果从第一个tab到第六个tab的索引是0,1,2,3,4,5。

那么滑块的公式就是(索引*tab的宽度)。大家看到有逐渐过去的效果,其实是css3过渡(transition)的效果。大家看下面的代码就行了,一看就懂!代码如下:

vue方式

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>Title</title> 
  6. </head> 
  7. <link rel="stylesheet" href="reset.css"
  8. <style> 
  9.     .nav{ 
  10.         margin: 40px; 
  11.         position: relative
  12.     } 
  13. .nav li{ 
  14.     floatleft
  15.     width: 100px; 
  16.     height: 40px; 
  17.     line-height: 40px; 
  18.     color: #fff; 
  19.     text-align: center; 
  20.     background: #09f; 
  21.     cursor: pointer; 
  22.     .nav span{ 
  23.         position: relative
  24.         z-index: 2; 
  25.     } 
  26.     .nav .slider{ 
  27.         position: absolute
  28.         transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38); 
  29.         width: 100px; 
  30.         height: 40px; 
  31.         background: #f90; 
  32.         top: 0; 
  33.         left: 0; 
  34.         z-index: 1; 
  35.     } 
  36. </style> 
  37. <body> 
  38. <div class="nav clear" id="nav" @mouseleave="nowIndex=0"
  39.     <ul> 
  40.         <li @mouseenter.stop="nowIndex=0"><span>Tab One</span></li> 
  41.         <li @mouseenter.stop="nowIndex=1"><span>Tab Two</span></li> 
  42.         <li @mouseenter.stop="nowIndex=2"><span>Tab Three</span></li> 
  43.         <li @mouseenter.stop="nowIndex=3"><span>Tab four</span></li> 
  44.         <li @mouseenter.stop="nowIndex=4"><span>Tab five</span></li> 
  45.         <li @mouseenter.stop="nowIndex=5"><span>Tab six</span></li> 
  46.     </ul> 
  47.     <div class="slider" :style="{'transform':'translate3d('+nowIndex*100+'px,0,0)'}"></div> 
  48. </div> 
  49. </body> 
  50. <script src="vue.min.js"></script> 
  51. <script type="text/javascript"
  52.    new Vue({ 
  53.        el:'#nav'
  54.        data:{ 
  55.            nowIndex:0 
  56.        } 
  57.    }) 
  58. </script> 
  59. </html> 

javascript方式

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>Title</title> 
  6. </head> 
  7. <link rel="stylesheet" href="reset.css"
  8. <style> 
  9.     .nav{ 
  10.         position: relative
  11.     } 
  12. .nav li{ 
  13.     floatleft
  14.     width: 100px; 
  15.     height: 40px; 
  16.     line-height: 40px; 
  17.     color: #fff; 
  18.     text-align: center; 
  19.     background: #09f; 
  20.     cursor: pointer; 
  21.     .nav span{ 
  22.         position: relative
  23.         z-index: 2; 
  24.     } 
  25.     .nav .slider{ 
  26.         position: absolute
  27.         transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38); 
  28.         width: 100px; 
  29.         height: 40px; 
  30.         background: #f90; 
  31.         top: 0; 
  32.         left: 0; 
  33.         z-index: 1; 
  34.     } 
  35. </style> 
  36. <body> 
  37. <div class="nav clear" id="nav"
  38.     <ul> 
  39.         <li><span>Tab One</span></li> 
  40.         <li><span>Tab Two</span></li> 
  41.         <li><span>Tab Three</span></li> 
  42.         <li><span>Tab four</span></li> 
  43.         <li><span>Tab five</span></li> 
  44.         <li><span>Tab six</span></li> 
  45.     </ul> 
  46.     <div class="slider"></div> 
  47. </div> 
  48. </body> 
  49. <script type="text/javascript"
  50.     var oDiv=document.querySelector("#nav"),oLi=oDiv.querySelectorAll("li"),oSlider=document.querySelector(".slider"); 
  51.     oDiv.addEventListener("mouseleave",function () { 
  52.         oSlider.style.transform='translate3d(0,0,0)'
  53.     }) 
  54.     for(var i=0;i<oLi.length;i++){ 
  55.         oLi[i].index=i; 
  56.         oLi[i].addEventListener("mouseenter",function (e) { 
  57.             oSlider.style.transform='translate3d('+this.index*100+'px,0,0)'
  58.         }) 
  59.     } 
  60. </script> 
  61. </html> 

4、轮播图

运行效果

原理分析

蓝框的是li,黑框的是div

初始化状态

处于显示第二张图片的时候

看到上面,其实也就是控制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方式

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>Title</title> 
  6.     <link rel="stylesheet" href="reset.css"
  7.     <style> 
  8.         .slide-img { 
  9.             width: 1000px; 
  10.             height: 500px; 
  11.             overflow: hidden; 
  12.             position: relative
  13.             margin: 20px auto; 
  14.         } 
  15.  
  16.         ul { 
  17.             transition: all .5s ease; 
  18.         } 
  19.  
  20.         li { 
  21.             floatleft
  22.         } 
  23.  
  24.         .slide-arrow div { 
  25.             width: 50px; 
  26.             height: 100px; 
  27.             position: absolute
  28.             margin: auto; 
  29.             top: 0; 
  30.             bottom: 0; 
  31.             background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg"no-repeat; 
  32.         } 
  33.  
  34.         .arrow-right { 
  35.             transform: rotate(180deg); 
  36.             right: 0; 
  37.         } 
  38.  
  39.         .arrow-left { 
  40.             left: 0; 
  41.         } 
  42.         .slide-option
  43.             position: absolute
  44.             bottom: 10px; 
  45.             width: 100%; 
  46.             left: 0; 
  47.             text-align: center; 
  48.         } 
  49.         .slide-option span{ 
  50.             display: inline-block; 
  51.             width: 14px; 
  52.             height: 14px; 
  53.             border-radius: 100%; 
  54.             background: #ccc; 
  55.             margin: 0 10px; 
  56.         } 
  57.         .slide-option .active{ 
  58.             background: #09f; 
  59.         } 
  60.     </style> 
  61. </head> 
  62. <body> 
  63. <div class="slide-img clear" id="slide-img"
  64.     <!--用tran这个class控制ul是否含有过渡效果,样式已经写好--> 
  65.     <ul :style="{'width':(listWidth*list.length)+'px','transform':'translate3d(-'+(listWidth*nowIndex)+'px,0,0)'}"
  66.         <!--遍历出来的图片--> 
  67.         <li v-for="(li,index) in list" :style="{'width':listWidth+'px'}"
  68.             <a href="javascript:;"
  69.                 <img :src="li" class="slider-img"/> 
  70.             </a> 
  71.         </li> 
  72.     </ul> 
  73.     <div class="slide-option"
  74.         <span v-for="(li,index) in list" :class="{'active':index===nowIndex}"></span> 
  75.     </div> 
  76.     <div class="slide-arrow"
  77.         <div class="arrow-left" @click.stop="switchDo('reduce')"></div> 
  78.         <div class="arrow-right" @click.stop="switchDo"></div> 
  79.     </div> 
  80. </div> 
  81. </body> 
  82. <script src="vue.min.js"></script> 
  83. <script type="text/javascript"
  84.     new Vue({ 
  85.         el: '#slide-img'
  86.         data: { 
  87.             nowIndex: 0, 
  88.             listWidth: '1000'
  89.             list: ['./images/timg1.jpg''./images/timg2.jpg''./images/timg3.jpg''./images/timg4.jpg'], 
  90.             timer:null 
  91.         }, 
  92.         methods: { 
  93.             //滑动操作 
  94.             switchDo(reduce){ 
  95.                 clearInterval(this.timer); 
  96.                 //根据reduce判断this.nowIndex的增加或者减少! 
  97.                 if(reduce==='reduce'){ 
  98.                     //如果是第一张,就返回最后一张 
  99.                     if(this.nowIndex===0){ 
  100.                         this.nowIndex=this.list.length-1; 
  101.                     } 
  102.                     else
  103.                         this.nowIndex--; 
  104.                     } 
  105.                 } 
  106.                 else
  107.                     //如果是最后一张,就返回第一张 
  108.                     if(this.nowIndex===this.list.length-1){ 
  109.                         this.nowIndex=0; 
  110.                     } 
  111.                     else
  112.                         this.nowIndex++; 
  113.                     } 
  114.                 } 
  115.                 var _this=this; 
  116.                 this.timer=setInterval(function () { 
  117.                     _this.switchDo(); 
  118.                 },4000) 
  119.  
  120.             }, 
  121.         }, 
  122.         mounted(){ 
  123.             var _this=this; 
  124.             this.timer=setInterval(function () { 
  125.                 _this.switchDo(); 
  126.             },4000) 
  127.         } 
  128.     }) 
  129. </script> 
  130. </html> 

javascript方式

  1. <!DOCTYPE html> 
  2. <html lang="en"
  3. <head> 
  4.     <meta charset="UTF-8"
  5.     <title>Title</title> 
  6.     <link rel="stylesheet" href="reset.css"
  7.     <style> 
  8.         .slide-img { 
  9.             width: 1000px; 
  10.             height: 500px; 
  11.             overflow: hidden; 
  12.             position: relative
  13.             margin: 20px auto; 
  14.         } 
  15.  
  16.         ul { 
  17.             transition: all .5s ease; 
  18.         } 
  19.  
  20.         li { 
  21.             floatleft
  22.         } 
  23.  
  24.         .slide-arrow div { 
  25.             width: 50px; 
  26.             height: 100px; 
  27.             position: absolute
  28.             margin: auto; 
  29.             top: 0; 
  30.             bottom: 0; 
  31.             background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg"no-repeat; 
  32.         } 
  33.  
  34.         .arrow-right { 
  35.             transform: rotate(180deg); 
  36.             right: 0; 
  37.         } 
  38.  
  39.         .arrow-left { 
  40.             left: 0; 
  41.         } 
  42.         .slide-option
  43.             position: absolute
  44.             bottom: 10px; 
  45.             width: 100%; 
  46.             left: 0; 
  47.             text-align: center; 
  48.         } 
  49.         .slide-option span{ 
  50.             display: inline-block; 
  51.             width: 14px; 
  52.             height: 14px; 
  53.             border-radius: 100%; 
  54.             background: #ccc; 
  55.             margin: 0 10px; 
  56.         } 
  57.         .slide-option .active{ 
  58.             background: #09f; 
  59.         } 
  60.     </style> 
  61. </head> 
  62. <body> 
  63. <div class="slide-img clear" id="slide-img"
  64.     <!--用tran这个class控制ul是否含有过渡效果,样式已经写好--> 
  65.     <ul id="slide-img-ul"
  66.         <!--遍历出来的图片--> 
  67.         <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg1.jpg" class="slider-img"/></a></li> 
  68.         <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg2.jpg" class="slider-img"/></a></li> 
  69.         <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg3.jpg" class="slider-img"/></a></li> 
  70.         <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg4.jpg" class="slider-img"/></a></li> 
  71.     </ul> 
  72.     <div class="slide-option"
  73.         <span></span> 
  74.         <span></span> 
  75.         <span></span> 
  76.         <span></span> 
  77.     </div> 
  78.     <div class="slide-arrow"
  79.         <div class="arrow-left"></div> 
  80.         <div class="arrow-right"></div> 
  81.     </div> 
  82. </div> 
  83. </body> 
  84. <script type="text/javascript"
  85.     window.onload=function () { 
  86.         var oUl=document.querySelector('#slide-img-ul'); 
  87.         var oLi=oUl.querySelectorAll('li'); 
  88.         var oSpan=document.querySelector('.slide-option').querySelectorAll('span'); 
  89.         var oArrowLeft=document.querySelector('.arrow-left'); 
  90.         var oArrowRight=document.querySelector('.arrow-right'); 
  91.         oUl.style.width='4000px'
  92.         oArrowLeft.addEventListener('click',function () { 
  93.             switchDo('reduce'); 
  94.         }) 
  95.         oArrowRight.addEventListener('click',function () { 
  96.             switchDo(); 
  97.         }) 
  98.         var timer=null,nowIndex=0; 
  99.         function switchDo(reduce){ 
  100.             clearInterval(timer); 
  101.             //设置样式 
  102.             oUl.style.transform='translate3d(-'+(1000*nowIndex)+'px,0,0)'
  103.             for (var i=0;i<oSpan.length;i++){ 
  104.                 if(i===nowIndex){ 
  105.                     oSpan[i].className='active'
  106.                 } 
  107.                 else
  108.                     oSpan[i].className=''
  109.                 } 
  110.             } 
  111.             //根据reduce判断this.nowIndex的增加或者减少! 
  112.             if(reduce==='reduce'){ 
  113.                 //如果是第一张,就返回最后一张 
  114.                 if(nowIndex===0){ 
  115.                     nowIndex=oLi.length-1; 
  116.                 } 
  117.                 else
  118.                     nowIndex--; 
  119.                 } 
  120.             } 
  121.             else
  122.                 //如果是最后一张,就返回第一张 
  123.                 if(nowIndex===oLi.length-1){ 
  124.                     nowIndex=0; 
  125.                 } 
  126.                 else
  127.                     nowIndex++; 
  128.                 } 
  129.             } 
  130.             timer=setInterval(function () { 
  131.                 switchDo(); 
  132.             },4000) 
  133.         } 
  134.         switchDo(); 
  135.     } 
  136. </script> 
  137. </html> 

5、小结

好了,关于vue+css3开发的特效,以及和javascript+css3的对比,就说到这里了,希望这三个小实例,能帮到大家了解下应该怎么使用vue+css3开发特效的。今天讲这三个小实例不是说给大家代码,让大家复制粘贴使用,而是希望能起到一个抛砖引玉的作用,拓展思维的作用!就像我之前写文章说得那样,我写文章是希望能起到一个授人以渔的作用,而不是授人以鱼!最后,如果大家觉得有什么地方我写错了,写错不好,或者有其它什么建议,欢迎指出!让大家相互学习,共同进步! 

责任编辑:庞桂玉 来源: segmentfault
相关推荐

2019-10-25 09:35:58

HTTPSHTTP通信

2019-03-11 15:26:26

HTTPSHTTP密钥

2019-11-13 09:08:50

HTTPS安全加密算法

2015-01-19 17:44:02

Cocos引擎3D特效

2013-11-25 17:14:33

Windows 9

2019-11-15 09:26:36

OAuthWeb系统

2012-05-24 11:03:55

HTML5

2013-04-10 09:28:24

CSS3CSS

2011-11-25 13:18:40

HTML 5

2023-12-25 09:41:37

点云训练

2012-02-24 09:11:45

jQuery

2010-09-14 20:02:14

2017-04-11 13:52:02

华为

2017-04-12 16:27:52

华为

2013-07-31 14:19:06

Windows 8.1

2011-12-16 11:11:36

HTML 5

2021-08-23 13:25:25

Vue3CSS前端

2021-01-20 14:25:53

Vue3CSS前端

2011-02-17 10:54:59

CSS3变换 简单快捷

2017-02-17 12:30:40

外设
点赞
收藏

51CTO技术栈公众号