css動(dòng)畫 --- transition

leoperfect 發(fā)布于2019-08-22 14:02 / 3213人閱讀

摘要：初探提供了一種在更改屬性時(shí)控制動(dòng)畫速度的方法。其可以讓屬性變化成為一個(gè)持續(xù)一段時(shí)間的過程，而不是立即生效的。軸的取值范圍區(qū)間內(nèi)軸可以任意值。動(dòng)手使用下基本操作的里有，要觸發(fā)它，則需要改變上面所說的。

前言

頁面效果是很重要的一環(huán)，好的頁面效果，可以讓用戶感覺很舒服，進(jìn)而能吸引更多的用戶。
既然是頁面效果，那么動(dòng)畫肯定不可或缺，那么這篇先說下 transition 這個(gè) css3 屬性。

初探 transition

transitions 提供了一種在更改 CSS 屬性時(shí)控制動(dòng)畫速度的方法。其可以讓屬性變化成為一個(gè)持續(xù)一段時(shí)間的過程，而不是立即生效  的。（摘自MDN）

用法

其寫法（為了兼容，要加廠商前綴，這里不寫咯）：

transition:

也可以用逗號(hào)隔開，多寫幾個(gè)作用于不用的 property（屬性）

transition:    ,

各項(xiàng)作用

@	值	默認(rèn)值	作用
property	none / all / property	all	作用于需要過渡的屬性
duration	time	0	過渡所需時(shí)間
timing-function	linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier(n,n,n,n)	ease	規(guī)定過渡效果的速度曲線
delay	time (同duration)	0	延遲多久才開始過渡

property：可過渡的 CSS 屬性，有些屬性則不行。

time：以秒（如1s）或毫秒（如1000）計(jì)。

cubic-bezier(x1,y1,x2,y2)：三階貝塞爾曲線。linear ，ease 等等都是由它計(jì)算出來的。x軸的取值范圍：[0,1] 區(qū)間內(nèi), y軸可以任意值?？稍诰€自定義。

動(dòng)手使用下 基本操作

// css
#box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
}

#box:hover {
  width: 500px;
  margin-top: 100px;
}

// html

#box的 style 里有transition，要觸發(fā)它，則需要改變上面所說的 property 。

當(dāng)鼠標(biāo)移到 div 時(shí)，width 和 marin-top 發(fā)生了變化，觸發(fā)了 transition 。

all ：所有可過渡的屬性都可以的意思。

1s ：在第二項(xiàng)，即 duration 。過渡所需時(shí)間。

簡(jiǎn)單的類似圖片無縫滑動(dòng)

// css
* {
  margin: 0;
  padding: 0;
}

#box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  overflow: hidden;
  
}

#img_container {
  position: relative;
  width: 400px;
  transition: all .7s linear;
  -webkit-transition: all .7s linear;
  -moz-transition: all .7s linear;
  -ms-transition: all .7s linear;
  -o-transition: all .7s linear;
}

#img_container span {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: yellow;
}

#img_container span:nth-of-type(even) {
  background-color: red;
}

ul {
  text-align: center;
}

li {
  padding: 10px;
  cursor: pointer;
  list-style: none;
  display: inline-block;
}

// html

  
     1234
  


  圖一
  圖二
  圖三
  圖四


// js
~function () {
    let lis    = document.getElementsByTagName("li");
    let imgBox = document.getElementById("img_container");
    let width  = +document.querySelector("span").clientWidth;
    
    for (let j = 0;j < lis.length;j++) {
      
      lis[j].addEventListener("click",function() {
        imgBox.style.marginLeft = `-${ width * j }px`;
      });

    }

}()

這個(gè) demo 是用 js 改變了 property ，從而觸發(fā) transition。

滾動(dòng)到某個(gè)位置，動(dòng)畫才出現(xiàn)

// css
* {
  margin: 0;
  padding: 0;
}

body {
  height: 1500px;
}


#box {
  height: 1200px;
  text-align: center;
}

#animation {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -webkit-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -moz-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -ms-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
  -o-transition: transform 1s cubic-bezier(.1,1.92,.71,.53);
}

// html

  請(qǐng)往下滾動(dòng)到有動(dòng)畫的地方，或者點(diǎn)擊 這里




// js 
let animation = function () {
    let animationBox = document.getElementById("animation");

    function show () {
      animationBox.style.transform = "translateX(600px) scale(3,3) rotate(360deg)";
    }

    function init () {
      animationBox.style.transform = "translateX(0) scale(1,1) rotate(-360deg)";
    }

    return { show, init };
  }()

  window.onscroll = function () {
    let scrollTop = +window.scrollY;

    if (scrollTop > 650) {
      animation.show();
    } else {
      animation.init();
    }
  }

因?yàn)橹饕菔緞?dòng)畫，所以沒寫滾動(dòng)的節(jié)流或防抖了。

當(dāng)滾動(dòng)或點(diǎn)擊到動(dòng)畫的位置，動(dòng)畫才開始。

在 css 代碼可以看到，transition 要通過 transform 的變化來觸發(fā)。同時(shí)我也用到了 cubic-bezier 。

最后

這里不深入講解 cubic-bezier ，因?yàn)槲铱丛硪彩穷^暈。。。。
transition 還可以實(shí)現(xiàn)很多功能，淡出淡入 ， 手風(fēng)琴效果 等等。等著你們?nèi)グl(fā)現(xiàn)。
其實(shí)動(dòng)畫不是特別難的，只要你有顆騷動(dòng)（好奇）的心。