|
|
|
|
移动端

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

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

作者:守候来源:segmentfault|2017-11-21 13:15

【新品产上线啦】51CTO播客,随时随地,碎片化学习

 

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开发特效的。今天讲这三个小实例不是说给大家代码,让大家复制粘贴使用,而是希望能起到一个抛砖引玉的作用,拓展思维的作用!就像我之前写文章说得那样,我写文章是希望能起到一个授人以渔的作用,而不是授人以鱼!最后,如果大家觉得有什么地方我写错了,写错不好,或者有其它什么建议,欢迎指出!让大家相互学习,共同进步!

【编辑推荐】

  1. Python转JavaScript编译器,天了噜!还能转代码,到底怎么做到的
  2. 14个你可能不知道的JavaScript调试技巧
  3. 程序员总结分析:为什么要用原生 JavaScript 代替 jQuery?
  4. 这些JavaScript编程黑科技,高逼格代码,让你惊叹不已
  5. 一文读懂JavaScript和ECMAScript的区别
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网络服务器配置与应用(第3版)

本书是由长期从事网络管理工作和网络工程人员培训工作的一线网管人员和教学人员精心编写,从现实的技术发展角度和实际应用的角度,通过大量...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊