Vue+CSS3를 사용하여 대화형 효과를 만드는 방법
- php中世界最好的语言원래의
- 2017-11-27 15:18:132575검색
프로젝트를 할 때 반드시 인터랙티브 효과나 특수 효과가 사용된다는 것을 알고 있습니다. 저는 프로젝트를 개발하고 Vue를 사용해 본 적이 있는데, 그 과정에서 Vue+CSS3를 사용했습니다. +css3은 특수 효과를 개발하는 데 매우 유용합니다. 오늘은 그러한 튜토리얼을 가져오겠습니다.
1. 기사의 코드는 매우 간단하고 이해하기 어렵지 않지만 혼동을 피하기 위해 작성하면서 읽는 것이 좋습니다.
2. 기사에 언급된 작은 예는 매우 기본적인 것이므로 자신의 아이디어에 따라 확장하거나 수정할 수 있으며 예상치 못한 효과가 있을 수 있습니다. 이런 글을 쓰면서 나는 사람들에게 낚시하는 법을 가르치는 것이 아니라 낚시하는 법을 가르쳐 주고 싶다!
3. 이 예제는 제가 직접 수행한 일일 연습 프로젝트에서 가져온 것이며 코드는 github(vue-demos)에 언급되어 있습니다. 스타가 된 여러분을 환영합니다.
2. 오프닝 애니메이션
원리 분석
원리 분석이라고 하면 실제로는 아래와 같은 상태에서 텍스트를 교체하는 것입니다. 글꼴이 공 모양으로 줄어드는 것은 letter-spacing CSS 속성의 제어 효과입니다. 글꼴 흐림은 필터 흐림() CSS 속성의 제어 효과입니다! CSS3 애니메이션의 효과인 점진적인 변화가 있음을 알 수 있습니다. 아래에서 볼 수 있듯이 이 애니메이션의 단계는 총 8단계입니다.
이제 명확합니다. 아래 그림의 순간, 즉 페이지가 로드된 후 2초 후에 텍스트 변경을 시작하기 전에 애니메이션이 두 번 실행됩니다. 그럼 끝까지 2초마다 텍스트를 바꿔보세요!
vue와
javascript두 가지 메소드에 대한 코드가 아래에 나와 있습니다. 어떤 메소드가 더 간단한지 살펴보겠습니다. vue method
<!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> <div id="text"> <h1>{{testText}}</h1> </div> </body> <script src="vue.min.js"></script> <script type="text/javascript"> new Vue({ el:'#text', data:{ nowIndex:0, testText:'欢迎浏览' }, mounted(){ let _this=this; let timer = setInterval(function(){ _this.nowIndex++; switch (_this.nowIndex) { case 1: _this.testText = '守候的文章'; break; case 2: _this.testText = '愿您浏览愉快'; break; case 3: _this.testText = '学到知识'; break; } if (_this.nowIndex > 3) { setTimeout(() => { clearInterval(timer); }, 2000) } }, 2000) } }) </script> </html>javascript method
<!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> <div id="text"> <h1>欢迎浏览</h1> </div> </body> <script> var oH1=document.querySelector('h1'),nowIndex=0; console.log(oH1) var timer = setInterval(function () { nowIndex++; switch (nowIndex) { case 1: oH1.innerHTML = '守候的文章'; break; case 2: oH1.innerHTML = '愿您浏览愉快'; break; case 3: oH1.innerHTML = '学到知识'; break; } if (nowIndex > 3) { setTimeout(() => { clearInterval(timer); }, 2000) } }, 2000) </script> </html>3. 내비게이션 슬라이더
작동 효과
원리 분석
먼저 페이지 초기화 시 주황색 슬라이더의 위치는 다음과 같습니다
마우스를 얹어주세요 두 번째 탭 위에서 보면 주황색 슬라이더가 한 탭만큼 오른쪽으로 이동한 것을 볼 수 있습니다. 세 번째 탭에 마우스를 올려놓으면 주황색 슬라이더가 두 탭만큼 오른쪽으로 이동한 것을 볼 수 있습니다.
첫 번째 탭부터 여섯 번째 탭까지의 인덱스가 0,1,2,3,4,5라면.
그러면 슬라이더의 공식은 (인덱스 * 탭 너비)입니다. 보시다시피 점차적으로 지나가는 효과는 실제로 CSS3 전환 효과입니다. 아래 코드를 보시면 한 눈에 이해가 되실 겁니다! 코드는 다음과 같습니다:
vue method
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link rel="stylesheet" href="reset.css"> <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> <div 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> <div class="slider" :style="{'transform':'translate3d('+nowIndex*100+'px,0,0)'}"></div> </div> </body> <script src="vue.min.js"></script> <script type="text/javascript"> new Vue({ el:'#nav', data:{ nowIndex:0 } }) </script> </html>javascript method
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link rel="stylesheet" href="reset.css"> <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> <div 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> <div class="slider"></div> </div> </body> <script type="text/javascript"> var oDiv=document.querySelector("#nav"),oLi=oDiv.querySelectorAll("li"),oSlider=document.querySelector(".slider"); oDiv.addEventListener("mouseleave",function () { oSlider.style.transform='translate3d(0,0,0)'; }) for(var i=0;i<oLi.length;i++){ oLi[i].index=i; oLi[i].addEventListener("mouseenter",function (e) { oSlider.style.transform='translate3d('+this.index*100+'px,0,0)'; }) } </script> </html>4. Carousel image
파란색 프레임은 li, 검은색 프레임은 div
위를 보면 실제로 ul의 오프셋을 제어합니다(변환: 3d)를 번역하세요. 계산식은 위의 슬라이더와 유사하며 index (0|1|2|3)*li 너비입니다. 차이점은 ul의 오프셋이 음수라는 것입니다. 왜냐하면 ul은 왼쪽으로 이동하기를 원하고 위의 슬라이더는 오른쪽으로 이동하기를 원하기 때문입니다!
첫 번째 사진을 찍을 때 ul 오프셋이 설정됩니다(변환:translate3d(0px, 0px, 0px)).두 번째 사진을 찍을 때 ul 오프셋을 설정하세요(변환:translate3d(-1000px, 0px, 0px)).
두 번째 사진을 찍을 때 ul 오프셋을 설정하세요(변환:translate3d(-2000px, 0px, 0px)). 비유하자면 오프셋을 쉽게 계산할 수 있습니다!
제가 말한 내용이 조금 헷갈리실 수도 있겠지만, 아래 코드를 보시면 코드도 매우 간단하기 때문에 헷갈리지 않으실 겁니다!
vue method
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="reset.css"> <style> .slide-img { width: 1000px; height: 500px; overflow: hidden; position: relative; margin: 20px auto; } ul { transition: all .5s ease; } li { float: left; } .slide-arrow div { 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> <div class="slide-img clear" id="slide-img"> <!--用tran这个class控制ul是否含有过渡效果，样式已经写好--> <ul :style="{'width':(listWidth*list.length)+'px','transform':'translate3d(-'+(listWidth*nowIndex)+'px,0,0)'}"> <!--遍历出来的图片--> <li v-for="(li,index) in list" :style="{'width':listWidth+'px'}"> <a href="javascript:;"> <img :src="li" class="slider-img"/> </a> </li> </ul> <div class="slide-option"> <span v-for="(li,index) in list" :class="{'active':index===nowIndex}"></span> </div> <div class="slide-arrow"> <div class="arrow-left" @click.stop="switchDo('reduce')"></div> <div class="arrow-right" @click.stop="switchDo"></div> </div> </div> </body> <script src="vue.min.js"></script> <script type="text/javascript"> new Vue({ el: '#slide-img', data: { nowIndex: 0, listWidth: '1000', list: ['./images/timg1.jpg', './images/timg2.jpg', './images/timg3.jpg', './images/timg4.jpg'], timer:null }, methods: { //滑动操作 switchDo(reduce){ clearInterval(this.timer); //根据reduce判断this.nowIndex的增加或者减少！ if(reduce==='reduce'){ //如果是第一张，就返回最后一张 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 method
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="reset.css"> <style> .slide-img { width: 1000px; height: 500px; overflow: hidden; position: relative; margin: 20px auto; } ul { transition: all .5s ease; } li { float: left; } .slide-arrow div { 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> <div class="slide-img clear" id="slide-img"> <!--用tran这个class控制ul是否含有过渡效果，样式已经写好--> <ul id="slide-img-ul"> <!--遍历出来的图片--> <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg1.jpg" class="slider-img"/></a></li> <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg2.jpg" class="slider-img"/></a></li> <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg3.jpg" class="slider-img"/></a></li> <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg4.jpg" class="slider-img"/></a></li> </ul> <div class="slide-option"> <span></span> <span></span> <span></span> <span></span> </div> <div class="slide-arrow"> <div class="arrow-left"></div> <div class="arrow-right"></div> </div> </div> </body> <script type="text/javascript"> window.onload=function () { var oUl=document.querySelector('#slide-img-ul'); var oLi=oUl.querySelectorAll('li'); var oSpan=document.querySelector('.slide-option').querySelectorAll('span'); var oArrowLeft=document.querySelector('.arrow-left'); var oArrowRight=document.querySelector('.arrow-right'); oUl.style.width='4000px'; oArrowLeft.addEventListener('click',function () { switchDo('reduce'); }) oArrowRight.addEventListener('click',function () { switchDo(); }) var timer=null,nowIndex=0; function switchDo(reduce){ clearInterval(timer); //设置样式 oUl.style.transform='translate3d(-'+(1000*nowIndex)+'px,0,0)'; for (var i=0;i<oSpan.length;i++){ if(i===nowIndex){ oSpan[i].className='active'; } else{ oSpan[i].className=''; } } //根据reduce判断this.nowIndex的增加或者减少！ if(reduce==='reduce'){ //如果是第一张，就返回最后一张 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을 사용하세요. 오늘 제가 이야기하는 세 가지 작은 예는 복사하여 붙여넣을 수 있는 코드를 제공하기 위한 것이 아니라 출발점이 되어 생각을 확장할 수 있기를 바랍니다! 이전 글에서도 말했듯이, 낚시하는 방법을 가르치는 것이 아니라 낚시하는 방법을 알려주는 역할을 할 수 있기를 바라는 마음으로 글을 씁니다! 마지막으로 제가 쓴 내용이나 틀린 부분이 있다고 생각하시거나, 다른 제안사항이 있으시면 지적해주세요! 모두가 서로에게서 배우고 함께 발전하도록 하세요!
이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
관련 읽기:캔버스를 사용하여 입자 분수 애니메이션 효과를 만드는 방법
위 내용은 Vue+CSS3를 사용하여 대화형 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：asyncio의 장점과 단점다음 기사：asyncio의 장점과 단점