CSS transition 屬性詳解 點擊打開視頻講解更詳細 定義和用法 transition 屬性是一個簡寫屬性，用於設置四個過渡屬性： transition-property 規定設置過渡效果的 CSS 屬性的名稱。 transition-duration 規定完成過渡效果需要多少秒或毫秒。 ...
CSS transition 屬性詳解
定義和用法
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：
- transition-property 規定設置過渡效果的 CSS 屬性的名稱。
- transition-duration 規定完成過渡效果需要多少秒或毫秒。
- transition-timing-function 規定速度效果的速度曲線。
- transition-delay 定義過渡效果何時開始。
預設值： all 0 ease 0
註釋：請始終設置 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。
transition-property 屬性
定義和用法
transition-property 屬性規定應用過渡效果的 CSS 屬性的名稱。（當指定的 CSS 屬性改變時，過渡效果將開始）。
語法：transition-property: none|all|property;
預設值： all
| 值 | 描述 |
|---|---|
| none | 沒有屬性會獲得過渡效果。 |
| all | 所有屬性都將獲得過渡效果。 |
| property | 定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。 |
案例：
<template>
<div id="app">
<div class="demo"></div>
<p>請把滑鼠指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
}
},
mounted() {
},
methods:{
}
}
</script>
<style scoped>
.demo{
width:100px;
height:100px;
background:blue;
transition-property: width;
transition-duration: 2s;
}
.demo:hover{
width:300px;
}
</style>
transition-duration 屬性
定義和用法
transition-duration 屬性規定完成過渡效果需要花費的時間（以秒或毫秒計）。
語法：transition-duration: time;
預設值： 0
| 值 | 描述 |
|---|---|
| time | 規定完成過渡效果需要花費的時間（以秒或毫秒計）。預設值是 0，意味著不會有效果。 |
案例：
<template>
<div id="app">
<div class="demo"></div>
<p>請把滑鼠指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
}
},
mounted() {
},
methods:{
}
}
</script>
<style scoped>
.demo{
width:100px;
height:100px;
background:blue;
transition-property: width;
transition-duration: 5s;
}
.demo:hover{
width:300px;
}
</style>
transition-timing-function 屬性
定義和用法
transition-timing-function 屬性規定過渡效果的速度曲線。
該屬性允許過渡效果隨著時間來改變其速度。
語法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);
預設值： ease
| 值 | 描述 |
|---|---|
| linear | 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)） |
| ease | 規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)） |
| ease-in | 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)） |
| ease-out | 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)） |
| ease-in-out | 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)） |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值 |
案例：
<template>
<div id="app">
<div class="demo"></div>
<p>請把滑鼠指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
}
},
mounted() {
},
methods:{
}
}
</script>
<style scoped>
.demo{
width:100px;
height:100px;
background:blue;
transition:width 5s;
transition-timing-function:linear;
}
.demo:hover{
width:300px;
}
</style>
transition-delay 屬性
定義和用法
transition-delay 屬性規定過渡效果何時開始。
transition-delay 值以秒或毫秒計。
語法：transition-delay: time;
預設值： 0
| 值 | 描述 |
|---|---|
| time | 規定在過渡效果開始之前需要等待的時間，以秒或毫秒計。 |
案例：
<template>
<div id="app">
<div class="demo"></div>
<p>請把滑鼠指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
}
},
mounted() {
},
methods:{
}
}
</script>
<style scoped>
.demo{
width:100px;
height:100px;
background:blue;
transition-property:width;
transition-duration:5s;
transition-delay:2s;
}
.demo:hover{
width:300px;
}
</style>
