CSSトランジション

前の言葉

移行により、Web フロントエンド開発者は JavaScript を使用せずに単純なアニメーション インタラクション効果を実現できます。遷移プロパティは単純に見えるかもしれませんが、実際には注意すべき詳細が多く、混乱が生じます。この記事では、CSSのtransitionに関する知識を整理して紹介します

Definition

Transitionは、transition-property、transition-duration、transition-timing-function、transition-layの4つのサブプロパティを含む複合属性です。 。これら 4 つのサブ属性の連携により、完全なトランジション効果を完成させることができます

transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

[注意] IE9-、safari3.1-6、IOS3.2-6.1、android2 ではこの属性はサポートされていません。 1-4.3 -webkit- プレフィックスを追加する必要があります。他の上位バージョンのブラウザは標準の書き込みをサポートしています

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;/*     以下三值为默认值，稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    .test:hover{
    width: 500px;
}

//要素の上にマウスを移動すると、幅が変更されます。が表示されます

複合属性

トランジションのこれら 4 つのサブ属性のうち、 のみが必須の値であり、0 にすることはできません。このうち、 と は両方とも時間です。 2 つの時間が同時に発生する場合、最初の時間は 、2 番目の時間は になります。時間が 1 つだけの場合、それは 、および になります。 -遅延> はデフォルト値 0

<p class="test"></p>

[注] これら 4 つのトランジションのサブプロパティはカンマで区切ることはできず、スペースでのみ区切ることができます。カンマで区切られたものは異なる属性を表しており (遷移属性は複数値をサポートしているため、複数値の部分は後で紹介します)、スペースで区切られたものは異なる属性の遷移に関する 4 つのサブ属性を表しています

。りー

りー

りー

りー

transition 属性

trans ition-property

値: none all | [ ? css スタイル値は遷移可能であり、中間値を持つ属性のみが遷移効果を持ちます

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

.test{
    height: 100px;
    width: 100px;
    background-color: pink;/*代表持续时间为2s，延迟时间为默认值0s*/
    transition；2s;}    .test:hover{
    width: 500px;
}

遷移期間

この属性の単位は秒またはミリ秒です

transition-duration

値: [,]*

初期値: 0s

適用対象: すべての要素

継承: なし

[注意] この属性は負の値にすることはできません

[注意] この属性が 0s の場合はデフォルト値、0 の場合は無効な値です。したがって、単位を取る必要があります

【注意】値が単一の値の場合、つまり、すべての遷移属性が同じ時間に対応します。値が複数の値の場合、遷移属性は順番に継続時間に対応します

<p class="test"></p>

遷移遅延時間

この属性は、遷移効果が開始されるまでの要素属性の遅延時間を定義します。この属性の単位は秒 s またはミリ秒 ms

transition-delay

です。値：[,]*

初期値：0s

適用先：全要素

継承：なし

【注意】この属性が負の値の場合、遅延は発生しません効果はありますが、トランジション要素の開始値は 0 から設定された固定値 (設定値 = 遅延時間 + 持続時間) まで変化します。設定値が 0 以下の場合、トランジション効果はありません。設定値が 0 より大きい場合、トランジション要素は設定値から開始して残りのトランジション効果を完了します

[注意] この属性が0 の場合はデフォルト値で、0 の場合は無効な値です。したがって、単位を取る必要があります

【注意】値が単一値の場合、つまり、すべての遷移属性が同じ時間に対応する場合、値が複数値の場合、遷移属性は順番に継続時間に対応します

.test{
    height: 100px;
    width: 100px;
    background-color: pink;    /*代表持续时间为1s，延迟时间为2s*/
    transition: 1s 2s;
}    .test:hover{
    width: 500px;
}

遷移時間関数

遷移時間関数は、時間の経過とともに変化する要素の遷移属性の遷移速度変更効果を定義するために使用されます

transition-timing-function

値: < ;timing-function>[, ]*

初期値:ease

適用先:すべての要素

継承:なし

value

遷移時間関数には3つの値があります、すなわち、キーワード、ステップ関数、ベジェ関数です

ステップ関数

ステップステップ関数は、遷移時間を等しいサイズの時間間隔に分割して実行します

ステップステップ関数は

<p class="test"></p>

none: 没有指定任何样式
all: 默认值，表示指定元素所有支持transition-property属性的样式<transition-property>: 可过渡的样式，可用逗号分开写多个样式

Bese Er 曲線

ベジェ曲線は 4 つの制御点 p0 ～ p3 によって制御されます。ここで、p0 は (0,0) を表し、p3 は (1,1) を表します。そして、p1(x1,y1)とp2(x2,y2)の値を決定することでが決定されます

transition-timing-function: cubic-bezier(x1,y1,x2,y2);

　　[注意]x1,y1,x2,y2都是0到1的值(包括0和1)

关键字

　　关键字其实是bezier函数或steps函数的特殊值

ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)
linear: 匀速。相当于cubic-bezier(0,0,1,1)
ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)
ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)
step-start: 直接位于结束处。相当于steps(1,start)
step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

多值

　　transition的多个属性值用逗号分隔开表示可以同时为多个值设置过渡属性

transtion: <single-transition>[,<single-transition>]*

<single-transition>: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

//property为all，timing-function为linear,delay为0s，duration为0s。表示无过渡行为transition: 0s;

【1】若不同的transition-property值，对应的transition-delay | transition-timing-function | transition-duration的属性值都相同时，则对应的这些属性设置一个即可

#test1{
    transition-property: width,background;
    transition-delay: 200ms;
    transition-timing-function: linear;
    transition-duration: 2s;
}/*类似于*/#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

【2】当transition-property值的个数多于对应的transition-delay | transition-timing-function | transition-duration的属性值(属性值的个数大于1个)时，将按顺序开始取值

#test1{
    transition-property: width,background,opacity;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}/*类似于*/#test2{
    transition: width 2s linear 200ms,background 500ms ease 0s,opacity 2s linear 200ms;
}

【3】当transition-property值的个数少于对应的transition-delay | transition-timing-function | transition-duration的属性值个数时，多余的属性值将无效

#test1{
    transition-property: width;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}/*类似于*/#test2{
    transition: width 2s linear 200ms;
}

【4】当transition-property的值中出现一个无效值，它依然按顺序对应transition的其他属性值(其他属性出现无效值，处理情况也类似)

#test1{
    transition-property: width,wuxiao,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}/*类似于*/#test2{
    transition: width 2s linear 200ms,background 2s linear 200ms;
}

【5】当transition-property的值中，有些值重复出现多次，则以最后出现的值为准，前面所有出现的值都被认定为无效值，但依然按顺序对应transition的其他属性值

#test1{
    transition-property: width,width,background;
    transition-duration: 2s,500ms;
    transition-timing-function: linear,ease;
    transition-delay: 200ms,0s;
}/*类似于*/#test2{
    transition: width 500ms ease 0s,background 2s linear 200ms;
}

过渡阶段

【1】过渡开始时间=样式改变的时刻+过渡延迟时间；而过渡结束时间=过渡开始时间+过渡持续时间

【2】过渡起始值=过渡前的过渡属性值；而过渡结束值=过渡完成后的过渡属性值

【3】过渡分为两个阶段：前进(forward)和反向(reverse)。若前进阶段进行一段时间后进入反向阶段，则反向阶段的初始值是前进阶段结束时的瞬时值

【4】以hover为例，若在元素非hover态时设置transition，相当于设置的反向状态。而前进和反向是一致的。而如果在元素hover态设置transition，则前进状态以hover态设置的为准，而反向状态以非hover态设置的为准

.test{
    width: 100px;
    transition: 3s;
}    
.test:hover{
    width: 500px;
    transition: 500ms;
}

【5】如果子元素和父元素过渡属性都一致。若触发子元素过渡时，父元素正在过渡，则将父元素过渡的中间态的值作为子元素过渡的初始值

.box:hover{
    font-size: 50px;
}
.test:hover{
    font-size: 30px;
}

<p class="box">
    <p class="test">test</p>
</p>

【6】若过渡起始值或过渡开始值为auto，则浏览器不会自己计算成具体数字值，而是不发生过渡效果。所以要过渡某些属性，首先需要将其重置成具体数字值

　　[注意]低版本webkit内核浏览器存在bug，会产生反向的过渡效果

.test{
    width: 100px;    -webkit-transition: width 2s;
    transition:width 2s;
}    
.test:hover{
    width:auto;
}

【7】隐式过渡是指一个属性改变时引起另一个属性的改变。如border-width是1em，则font-size改变时，border-width也会相应的改变。firefox和IE浏览器支持隐式过渡。而webkit内核浏览器不支持隐式过渡。

.test{
    border: 1px solid black;    -webkit-transition: font-size 2s;
    transition:font-size 2s;
    font: 20px/100px "宋体";
}    
.test:hover{
    font-size: 40px;
    border-right-width: 1em;
}

触发方式

　　一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等

【1】hover

　　鼠标悬停触发

【2】active

　　用户单击元素并按住鼠标时触发

【3】focus

　　获得焦点时触发

【4】@media触发

　　符合媒体查询条件时触发

/* 把浏览器的宽度拖动到小于1000px时触发 */@media (max-width: 1000px){
    .test{
        width: 500px;
    }
}

【5】点击事件

　　用户点击元素时触发

test.onclick = function(){
    test.style.width = '300px';
    setTimeout(function(){
        test.style.width = '100px';
    },3000);
}

API

　　关于过渡transition的事件只有一个，是transitionend事件，它发生在过渡事件完成后

　　[注意]safari3.1-6、ISO3.2-6.1、android2.1-4.3需要使用webkitTransitionEnd事件

属性

　　transitionEnd的事件对象具有以下3个私有属性　　

　　propertyName：发生transition效果的CSS属性名

　　elapsedTime：代表发生实际效果的持续时间。若完整进行，则返回完整时间；若中途中断，则返回实际时间

　　[注意]该属性具有兼容性问题，chrome返回持续时间加延迟时间，而其他浏览器只返回持续时间

<style>#test{height: 100px;width: 100px;background-color: pink;
    transition: width 1.5s 0.5s;}#test:hover{width: 200px;}</style><p id="test"></p><script>test.addEventListener("transitionend", myFunction);function myFunction(e){
    e = e || event;
    test.innerHTML = &#39;propertyName:&#39; + e.propertyName + &#39;; elapsedTime:&#39; + e.elapsedTime + &#39;; pseudoElement:&#39; + e.pseudoElement;
}</script>

　　 pseudoElement：如果transition效果发生在伪元素，会返回该伪元素的名称，以“::”开头。如果不发生在伪元素上，则返回一个空字符串''

　　[注意]若transition效果发生在伪元素上，IE浏览器将不会触发transitionEnd事件

<style>#test{height: 100px;width: 100px;position: relative;background-color: lightblue;}#test:before{content:&#39;我是伪元素&#39;;position: absolute;height: 100px;width: 100px;background-color: pink;
    left:200px;}#test:hover:before{width: 200px;transition: width 1.5s 0.5s;}</style><p id="test"></p><script>test.addEventListener("transitionend", myFunction);function myFunction(e){
    console.log(event)
    e = e || event;
    test.innerHTML = &#39;propertyName:&#39; + e.propertyName + &#39;; elapsedTime:&#39; + e.elapsedTime + &#39;; pseudoElement:&#39; + e.pseudoElement;
}</script>

注意事项

【1】过渡分为两个阶段：前进阶段和反向阶段。transitionend事件在前进阶段结束时会触发，在反向阶段结束时也会触发

var index = 0;//兼容低版本safari、IOS、androidtest.addEventListener("webkitTransitionEnd", myFunction);// 标准语法test.addEventListener("transitionend", myFunction);function myFunction() {
    index++;    this.innerHTML = index;}

【2】过渡事件触发的次数与transition-property过渡属性的个数有关。过渡属性有几个就会触发几次

    transition: width 1s,background-color 1s;    -webkit-transition: width 1s,background-color 1s;

【3】如果过渡属性是复合属性，如border-width相当于是border-top-width、border-bottom-width、border-left-width和border-right-width这四个属性的集合。则过渡事件触发4次

　　[注意]在低版本webkit内核浏览器里只触发1次

    transition:border-width 1s;    -webkit-transition: border-width 1s;

【4】如果过渡属性是默认值all，则过渡事件的次数是计算后的非复合的过渡属性的个数。如果发生过渡的属性是border-width和width，则经过计算后过渡事件应该触发5次

　　[注意]在低版本webkit内核浏览器中处理情况也一致

.test{
    width: 50px;
    border: 1px solid black;
    transition:all 1s;    -webkit-transition: all 1s;
}    
.test:hover{
    border-width: 10px;
    width: 100px;
}

【5】如果过渡延迟时间为负值，且绝对值大于等于过渡持续时间时，低版本webkit内核浏览器不会产生过渡效果，但会触发过渡事件；而其他浏览器即不会产生过渡效果，也不会触发过渡事件

    transition:width 1s -1s;    -webkit-transition: width 1s -1s;

【6】如果过渡属性存在复合属性及该复合属性包含的非复合属性，则浏览器计算复合属性的子属性时，不会重复计算已包含的属性

　　[注意]低版本webkit内核浏览器会出现bug，不仅复合属性被当作一个属性来触发事件，而且会多触发一次

.test{
    border: 1px solid black;
    transition:border-width 1s,border-left-width 2s;    -webkit-transition: border-width 1s,border-left-width 2s;
}    
.test:hover{
    border-width:10px;
}

　　[注意]当过渡事件执行完后，应及时使用removeEventListener取消绑定，以免对其他效果造成影响

var index = 0;//兼容低版本safari、IOS、androidtest.addEventListener("webkitTransitionEnd", myFunction);// 标准语法test.addEventListener("transitionend", myFunction);function myFunction() {
    index++;    this.innerHTML = index;    if(index == 1){
        test.removeEventListener("webkitTransitionEnd", myFunction);
        test.removeEventListener("transitionend", myFunction);
    }
}

更多CSS过渡transition 相关文章请关注PHP中文网！