1. Введение
При работе над проектом неизбежно приходится разрабатывать интерактивные эффекты или спецэффекты, и в моих недавних проектах я использовалvue, С точки зрения разработки стека технологий естественно использоватьvue+css3разработка, обнаруженная в процессе использованияvue+css3разработка спецэффектов иjavascript/jquery+css3мышление другое, ноjavascript/jquery+css3Будь проще. Сегодня я поделюсь тремя простыми небольшими примерами, в надежде сыграть свою роль в расширении мышления, чтобы каждый мог понять, как vue+css3 должен разрабатывать интерактивные эффекты! Если у вас есть хорошие предложения или вы думаете, что я написал что-то не так, пожалуйста, укажите!
1. Код над статьей, хотя код очень простой и не сложный для понимания, его также рекомендуется читать во время написания, чтобы не было путаницы.
2. Небольшие примеры, упомянутые в статье, очень просты, вы можете расширить или изменить их со ссылкой на свои собственные идеи, которые могут иметь неожиданные эффекты. Когда я пишу статьи такого типа, я также хочу научить людей ловить рыбу, а не давать им рыбу!
3. Эти примеры взяты из моего собственного проекта ежедневной практики, и код был упомянут на github (vue-demos). Добро пожаловать в звезду.
2. Вступительная анимация
текущий результат
Эффект размытия GIF-изображения отличается от фактического эффекта! Внимание всем!
Принципиальный анализ
Если говорить о принципиальном анализе, то анализировать, собственно, нечего, то есть когда страница находится в следующем состоянии, заменить текст. Что касается того, что купель сжалась в шар, то этоletter-spacingэтоcssЭффект управления свойством. размытые шрифтыfilter: blur()этоcssЭффект контроля атрибутов! Видя, что есть постепенное изменение, это анимация css3 (animation)Эффект
Ниже приводится краткий анализ шагов этой анимации.Как видно из следующего, эта анимация имеет всего 8 шагов.
Теперь ясно и понятно, мы должны начать менять текст в момент, показанный на рисунке ниже, то есть через две секунды после загрузки страницы, а текст начнет меняться после того, как анимация будет выполнена дважды. Затем меняйте текст каждые две секунды до конца!
нижеприведенныйvueа также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>
<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
<!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 (transition)Эффект. Просто взгляните на код ниже, и вы все поймете с первого взгляда! код показывает, как показано ниже:
вид пути
<!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
<!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. Роттери
текущий результат
Принципиальный анализ
Синяя рамка 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)). И так далее, смещение можно легко вычислить!
Может быть, все, о ком я говорю, немного запутались, но глядя на код ниже, вы не запутаетесь, потому что код тоже очень простой!
вид пути
<!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
<!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разработанные спецэффекты. Сегодня эти три небольших примера предназначены не для того, чтобы дать вам код, чтобы вы могли его скопировать и вставить, а для того, чтобы сыграть роль в привлечении других и расширении вашего мышления! Как я уже говорил в статье, я написал статью в надежде сыграть роль обучения человека ловить рыбу, а не дать ему рыбу! Наконец, если вы считаете, что я что-то написал не так, это нехорошо, или если у вас есть другие предложения, пожалуйста, укажите! Пусть все учатся друг у друга и добиваются прогресса вместе!
------------------------- Великолепная разделительная линия --------------------
Хотите узнать больше, обратите внимание на мой публичный аккаунт WeChat: В ожидании книжного магазина