主要是對狀態(tài)機的理解
集體跳繩，之前是把幾張圖片看作一個整體處理收苏，這里是一個個處理
*{margin: 0px;padding: 0px;}
*{box-sizing: border-box;}
.window{
width: 400px;
height: 300px;
margin: 20px auto;
overflow: hidden;
}
先初始化這些
.images{
display: flex;
position: relative;
}
.images>img{
width:100%;
transition: all 1s;
}
.images>img:nth-child(1){
position: absolute;
top: 0;
left: 0;
}
.images>img:nth-child(2){
position: absolute;
top: 0;
left:100%;
}
.images>img:nth-child(3){
position: absolute;
top: 0;
left:100%;
}
.images>img.right{
position: absolute;
top: 0;
left:100%;
}
然后一張張的動悄雅，看看怎么樣達(dá)到我們的目的
setTimeout(function(){
$('.images>img:nth-child(1)').css({
transform:'translateX(-100%)'
})
$('.images>img:nth-child(2)').css({
transform:'translateX(-100%)'
})
$('.images>img:nth-child(1)').one('transitionend',function(e){
$(e.currentTarget).addClass('right').css({transform:'none'})
})
},3000)
setTimeout(function(){
$('.images>img:nth-child(2)').css({
transform:'translateX(-200%)'
})
$('.images>img:nth-child(3)').css({
transform:'translateX(-100%)'
})
$('.images>img:nth-child(2)').one('transitionend',function(e){
$(e.currentTarget).addClass('right').css({transform:'none'})
})
},6000)
setTimeout(function(){
$('.images>img:nth-child(3)').css({
transform:'translateX(-200%)'
})
$('.images>img:nth-child(1)').css({
transform:'translateX(-100%)'
})
$('.images>img:nth-child(3)').one('transitionend',function(e){
$(e.currentTarget).addClass('right').css({transform:'none'})
})
},9000)
setTimeout(function(){
$('.images>img:nth-child(1)').css({
transform:'translateX(-100%)'
})
$('.images>img:nth-child(2)').css({
transform:'translateX(-100%)'
})
$('.images>img:nth-child(1)').one('transitionend',function(e){
$(e.currentTarget).addClass('right').css({transform:'none'})
})//動畫結(jié)束后發(fā)生的事情，如果是on就算結(jié)束一次動畫執(zhí)行一次完箩，one是只執(zhí)行一次赐俗，這里最后1還是得回去顯示的位置，所以每次就動一下
},12000)
進一步改進弊知，此時每片圖片有三種狀態(tài)
$('.images>img:nth-child(1)').addClass('current')
$('.images>img:nth-child(2)').addClass('enter')
setTimeout(()=>{
$('.images>img:nth-child(1)').removeClass('current').addClass('leave')
.one('transitionend',(e)=>{
$(e.currentTarget).removeClass('leave').addClass('enter')
})
$('.images>img:nth-child(2)').removeClass('enter').addClass('current')
},3000)
setTimeout(()=>{
$('.images>img:nth-child(2)').removeClass('current').addClass('leave')
.one('transitionend',(e)=>{
$(e.currentTarget).removeClass('leave').addClass('enter')
})
$('.images>img:nth-child(3)').removeClass('enter').addClass('current')
},6000)
setTimeout(()=>{
$('.images>img:nth-child(3)').removeClass('current').addClass('leave')
.one('transitionend',(e)=>{
$(e.currentTarget).removeClass('leave').addClass('enter')
})
$('.images>img:nth-child(1)').removeClass('enter').addClass('current')
},9000)
setTimeout(()=>{
$('.images>img:nth-child(1)').removeClass('current').addClass('leave')
.one('transitionend',(e)=>{
$(e.currentTarget).removeClass('leave').addClass('enter')
})
$('.images>img:nth-child(2)').removeClass('enter').addClass('current')
},12000)
然后優(yōu)化代碼
注意
$('.images>img:nth-child(n})')不可以阻逮，我們要的是數(shù)字，不會自動轉(zhuǎn)換取里面的數(shù)字秩彤，所以用es6的插值法叔扼，寫成下面的樣子
$(`.images>img:nth-child(${n}`)
$('.images>img:nth-child(1)').addClass('current')
$('.images>img:nth-child(2)').addClass('enter')
$('.images>img:nth-child(3)').addClass('enter')
let n=1
setInterval(()=>{
$(`.images>img:nth-child(${x(n)})`).removeClass('current').addClass('leave')
.one('transitionend',(e)=>{
$(e.currentTarget).removeClass('leave').addClass('enter')
})
$(`.images>img:nth-child(${x(n+1)})`).removeClass('enter').addClass('current')
n+=1
},3000)
function x(n){
if(n>3){
n=n%3
if(n===0){
n=3
}
}
return n
}
然后封裝成三個函數(shù)事哭，三種間切換
image.png
接下來學(xué)習(xí)Dom,dom specs ,0到4版本，
DOMleval 1很簡單瓜富，就是作個匯總鳍咱，有二個版本，看我畫紅圈的第二個
我們學(xué)的是dom2
html
js二邊都是函數(shù)
image.png
主要用2
對一個目標(biāo)用onclick后面的掩蓋前面的
對一個目標(biāo)用addEventListener后面的不會掩蓋前面的与柑，按順序執(zhí)行
還可以從隊列移除谤辜，移除了就不監(jiān)聽了
事件模型
事件模型
事件模型
看參數(shù)值定箭頭，執(zhí)行順序是對于父子之類多個目標(biāo)的垂直關(guān)系而言价捧，那6個箭頭誰先出現(xiàn)選誰先呈現(xiàn)
特殊情況：對一個目標(biāo)用了二種參數(shù)丑念，就是普通的像隊列先后出現(xiàn)，先寫哪個執(zhí)行哪個干旧，因為都寫了還都執(zhí)行
結(jié)果是兒子冒泡渠欺，兒子捕獲
