本部落格參考書籍《HTML5權威指南》，為個人原創，轉載請注明出處
一、過渡
過渡屬性
- transition-property ：應用過渡的屬性，值為屬性，值為all時，所有有變化的屬性會有過渡效果
- transition-duration:過渡的持續時間
- transition-timing-function:過渡期間計算中間值的方式， 預設ease ,其他值：ease-in、 ease-out、ease-in-out 、linear，還有cubic-bezier貝塞爾曲線,取值參考這裡
- transition-delay :過渡效果開始之前的延時，預設為0，值為時間
簡寫屬性：
transition:
案例：
<template>
<div class="ratings">
<div class='divBi'>shanghai </div>
</div>
</template>
<script>
export default {
name: 'ratings',
data(){
return {
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scope>
.divBi
margin:24px
width:100px
height:100px
background:pink
transition:all .8s ease
.divBi:hover
width:100px
height:100px
</style>
二、動畫（增強的過渡）
css動畫本質上是增強的過渡，在過渡中，有更多的選擇、更多的控制及靈活性
動畫屬性
- animation-name：指定動畫名稱
- animation-duration:動畫的持續時間
- animation-timing-function:動畫期間計算中間值的方式， 預設ease ,其他值：ease-in、 ease-out、ease-in-out 、linear，還有cubic-bezier貝塞爾曲線,取值參考這裡
- animation-delay :動畫效果開始之前的延時，預設為0，值為時間
- animation-iteration-count:動畫播放次數，預設為1
- animation-direction:是否返向播放，預設為normal,值為alternate時，遇到偶數次為向前，遇到基數次時為向後
簡寫屬性
animation：
案例：
<template>
<div class="ratings">
<div class='divBi'>shanghai </div>
</div>
</template>
<script>
export default {
name: 'ratings',
data(){
return {
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scope>
.divBi
margin:24px
width:100px
height:100px
background:pink
.divBi:hover
animation:hoverwid 2s ease
-webkit-animation:hoverwid 2s ease
@-webkit-keyframes hoverwid
to
width:px
height:px
</style>
三、變換
css變換為元素應用線性變換，包括：旋轉，縮放，傾斜，平移。推薦張鑫旭的部落格
變換屬性
| 函數 | 描述 |
|---|---|
| 平移 translate3d(x,y,z) | 定義 3D 轉化。 |
| 平移 translateX(x) | 定義 3D 轉化，僅使用用于 X 軸的值。 |
| 平移 translateY(y) | 定義 3D 轉化，僅使用用于 Y 軸的值。 |
| 平移 translateZ(z) | 定義 3D 轉化，僅使用用于 Z 軸的值。 |
| 縮放 scale3d(x,y,z) | 定義 3D 縮放轉換。 |
| 縮放 scaleX(x) | 定義 3D 縮放轉換，通過給定一個 X 軸的值。 |
| 縮放 scaleY(y) | 定義 3D 縮放轉換，通過給定一個 Y 軸的值。 |
| 縮放 scaleZ(z) | 定義 3D 縮放轉換，通過給定一個 Z 軸的值。 |
| 旋轉 rotate3d(x,y,z,angle) | 定義 3D 旋轉。 |
| 旋轉 rotateX(angle) | 定義沿 X 軸的 3D 旋轉。 |
| 旋轉 rotateY(angle) | 定義沿 Y 軸的 3D 旋轉。 |
| 旋轉 rotateZ(angle) | 定義沿 Z 軸的 3D 旋轉。 |
| perspective(n) | 定義 3D 轉換元素的透視視圖。 |
關于透視案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
#div1
{
position: relative;
height: px;
width: px;
margin: px;
padding:px;
border: px solid black;
perspective:;
-webkit-perspective:; /* Safari and Chrome */
}
#div2
{
padding:px;
position: absolute;
border: px solid black;
background-color: red;
transform: rotateX(deg);
-webkit-transform: rotateX(deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>
使用vuejs做平移
-要求：點選按鈕，從左下角方向移出或隐藏到右上角固定位置
- 點選時從左下角出現
- 小方塊的位置固定在右上角，動畫開始前enter 時，平移到左下角位置,translate3d取值：向左為負數，向下為正，透明度opacity為0
- 動畫開始時，過渡transition:all 2s
- 點選時向左下角隐藏
- 小方塊的位置固定在右上角，動畫離開後leave-to ，平移到左下角位置,translate3d取值：向左為負數，向下為正，透明度opacity為0
- 動畫離開過程中，過渡transition:all 2s
<template>
<div class="ratings">
<button @click='slidelit'>移動小方塊</button>
<transition name='slide'>
<div class='lit' v-show='lit_show'></div>
</transition>
</div>
</template>
<script>
export default {
name: 'ratings',
data(){
return {
lit_show :true
}
},
methods:{
slidelit(){
this.lit_show = !this.lit_show
}
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scope>
.lit
position:fixed
left:250px
bottom:400px
width:50px
height:50px
background:pink
&.slide-enter-active, &.slide-leave-active
transition:all 2s
&.slide-enter,&.slide-leave-to
opacity:0
transform:translate3d(-200px,200px,0)
</style>
![關于:first-child的誤區[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)