過(guò)渡 transition

1.過(guò)渡的定義和使用

在沒(méi)有過(guò)渡屬性的時(shí)候，當(dāng)一個(gè)元素的屬性值發(fā)生變化時(shí)，瀏覽器就會(huì)將個(gè)這個(gè)元素瞬間渲染成新屬性值的樣式。例如一個(gè)定位元素top:0，動(dòng)態(tài)修改成top:100px，這個(gè)元素就瞬間跑到100px的位置，有時(shí)候我們?yōu)榱诉_(dá)到某種視覺(jué)效果，希望它以動(dòng)畫的形式在一定的時(shí)間內(nèi)，從舊的樣式轉(zhuǎn)變成新的樣式，而這個(gè)過(guò)程就是過(guò)渡。過(guò)渡其實(shí)就是一個(gè)簡(jiǎn)單的動(dòng)畫效果

創(chuàng)新互聯(lián)公司專注于南豐企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站制作。南豐網(wǎng)站建設(shè)公司,為南豐等地區(qū)提供建站服務(wù)。全流程按需策劃設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

transition是簡(jiǎn)寫之后的屬性名，它其實(shí)是4個(gè)屬性合并而成的，按順序依次是：
transition-property: 過(guò)渡屬性(默認(rèn)值為all)
transition-duration: 過(guò)渡持續(xù)時(shí)間(默認(rèn)值為0s)
transiton-timing-function: 過(guò)渡函數(shù)(默認(rèn)值為ease函數(shù))
transition-delay: 過(guò)渡延遲時(shí)間(默認(rèn)值為0s)

注意：添加的屬性他的屬性值必須有明確的數(shù)值，例如color，left，width之類的，如果是display這種則無(wú)效

transition我們很少拆分使用，通常都是簡(jiǎn)寫
所有屬性過(guò)渡

transition: all 1s;

多個(gè)屬性過(guò)渡,各個(gè)屬性用 逗號(hào) 隔開(kāi)

transition: width 1s,height 1s;

設(shè)置延遲和過(guò)渡函數(shù)

transition: width 2s ease 1s;

2.過(guò)渡的時(shí)間函數(shù)

常用的值有：
ease - 先快后慢
linear - 勻速
ease-in - 先慢后快
steps - 將過(guò)渡時(shí)間劃分成大小相等的時(shí)間時(shí)隔來(lái)運(yùn)行，通俗來(lái)說(shuō)就是跳著走

以下面的代碼為例

transition: width 2s steps(4);

3.transition事件

transitionend - 過(guò)渡完成之后就會(huì)觸發(fā)這個(gè)事件
transitionstart - 過(guò)渡開(kāi)始執(zhí)行就會(huì)觸發(fā) 這個(gè)事件（延遲結(jié)束之后才執(zhí)行）
注意：只能用addaddEventListener添加事件，不支持屬性賦值函數(shù)的形式監(jiān)聽(tīng)

學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（從零基礎(chǔ)開(kāi)始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，職業(yè)規(guī)劃）
<script>
    var div = document.querySelector("div")
    var scale = true
    div.onclick = function(){
        if(scale){
            div.style.width = "400px"
        }else{
            div.style.width = "200px"
        }
        scale = !scale
    }

    // 這個(gè)方式監(jiān)聽(tīng)不支持
    div.transitionend = function(){
        console.log("過(guò)渡結(jié)束了")
    }

    // 下面的寫法才支持
    div.addEventListener("transitionend",function(){
        console.log("過(guò)渡結(jié)束了")
    })
    div.addEventListener("transitionstart",function(){
        console.log("過(guò)渡開(kāi)始了")
    })
</script>
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻）

過(guò)渡事件觸發(fā)的次數(shù)與transition-property過(guò)渡屬性的個(gè)數(shù)有關(guān)。過(guò)渡屬性有幾個(gè)就會(huì)觸發(fā)幾次

transition: width 2s,height 1s;

div.addEventListener("transitionend",function(){
        console.log("過(guò)渡結(jié)束了") //觸發(fā)兩次
    })

如果過(guò)渡屬性是復(fù)合屬性，如border-width相當(dāng)于是border-top-width、border-bottom-width、border-left-width和border-right-width這四個(gè)屬性的集合。則過(guò)渡事件觸發(fā)4次

動(dòng)畫

1.動(dòng)畫的定義

動(dòng)畫可以理解成多段多度的集合，通過(guò)設(shè)置關(guān)鍵幀來(lái)控制樣式變化的過(guò)程。例如一個(gè)元素的寬度從200px過(guò)渡到600px，起點(diǎn)和終點(diǎn)已經(jīng)固定了，能改變的無(wú)非就是事件函數(shù)，控制樣式變化的速度。在這階段中樣式始終朝著一個(gè)方向發(fā)展，不可能超出200-800的范圍。而動(dòng)畫可以設(shè)置若干個(gè)關(guān)鍵幀，來(lái)控制不同時(shí)段元素樣式的走向，達(dá)到一個(gè)視覺(jué)動(dòng)畫的效果

2.注冊(cè)動(dòng)畫

創(chuàng)建動(dòng)畫就是創(chuàng)建一個(gè)動(dòng)畫名稱，里面設(shè)置了若干個(gè)關(guān)鍵幀，控制元素在不同時(shí)段的樣式的變化方向
關(guān)鍵幀可以用百分比，也可以用from/to，from代表0%,to代表100%

@keyframes move {
    0% {
        left: 20px;
        top: 20px;
    }

    40% {
        left: 600px;
        top: 0;
    }

    80% {
        left: 600px;
        top: 400px;
    }

    100% {
        left: 300px;
        top: 200px;
    }
}

3.應(yīng)用動(dòng)畫

語(yǔ)法：animation:動(dòng)畫名 持續(xù)時(shí)間

.item{
    animation: move 3s;
}

4.其余屬性

animation-name:動(dòng)畫名稱
animation-duration:持續(xù)時(shí)間 單位/秒
animation-delay:延遲 單位/秒
animation-timing-function: 時(shí)間曲線
animation-iteration-count:循環(huán)次數(shù) infinite為無(wú)限次
nimation-direction:動(dòng)畫方向
animation-fill-mode：當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有延遲時(shí)，要應(yīng)用的規(guī)則

解析：
動(dòng)畫默認(rèn)只會(huì)執(zhí)行一次，如果想無(wú)限循環(huán)執(zhí)行下去，請(qǐng)?jiān)O(shè)置 animation-iteration-count:infinite

animation: move 3s infinite;

動(dòng)畫默認(rèn)只會(huì)朝著一個(gè)方向執(zhí)行，即使設(shè)置了多次循環(huán)，動(dòng)畫依然是用一個(gè)方向，如果想設(shè)置來(lái)回交替，請(qǐng)?jiān)O(shè)置animation-direction:alternate

animation: move 3s infinite alternate;

動(dòng)畫結(jié)束后會(huì)回到默認(rèn)的樣式，例如前面的例子，動(dòng)畫結(jié)束的位置是300,200，但是它馬上會(huì)退回到進(jìn)入動(dòng)畫前的0,0位置，如果要進(jìn)行設(shè)置，animation-fill-mode屬性有幾個(gè)值可以選：
none - 動(dòng)畫完成回到原先的樣式（默認(rèn)）
forwards - 停留到動(dòng)畫結(jié)束時(shí)的狀態(tài)
backwards - 如果動(dòng)畫有延遲，元素會(huì)馬上渲染成0%設(shè)置的樣式
both:相當(dāng)于（forwards + backwards）都保留

animation: move 6s 1s 2 both;

5.用js控制播放

可以用js控制animation-play-state屬性來(lái)控制動(dòng)畫的播放與暫停
它有2個(gè)值：
running - 播放
paused - 暫停

學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（從零基礎(chǔ)開(kāi)始到前端項(xiàng)目實(shí)戰(zhàn)教程，學(xué)習(xí)工具，職業(yè)規(guī)劃）
<script>
    var run = true
    var div = document.querySelector("div")
    function running(){
        if(run){
            // 如果是播放狀態(tài)就暫停
            div.style.animationPlayState = "paused"
        }else{
            div.style.animationPlayState = "running"
        }
        run = !run
    }
</script>

網(wǎng)頁(yè)題目：web前端入門到實(shí)戰(zhàn)：css3過(guò)渡和動(dòng)畫
網(wǎng)站URL：http://jinyejixie.com/article0/gpedoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、電子商務(wù)、品牌網(wǎng)站設(shè)計(jì)、服務(wù)器托管、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)