transition標籤 vue動畫

一、使用transition標籤包裹，

/*v-enter 是進入之前，元素的起始狀態

*//*

v-le**e-to 離開之後動畫的終止狀態

*/.v-enter, .v-le**e-to

/*入場(離場)動畫的時間段

*/.v-enter-active, v-le**e-active

// 帶有名字的transition

.mytransition-enter,

.mytransition-le**e-to

.mytransition-enter-active,

.mytransition-le**e-active

二、使用transition-group包裹的標籤

在實現列表過渡時，如果需要過渡的元素是通過 v-for 渲染出來的，不能使用 transition 包裹，而是需要使用 transition-group

若需要為 v-for 迴圈建立的元素設定動畫，必須為每個元素繫結 :key 屬性

for="(item,i) in list" :key="item.id" @click="del(i)">} ---}

.v-enter,.v-le**e-to

.v-enter-active,.v-le**e-active

/*v-move 和 v-le**e-active 配合使用，能夠實現列表後續的元素，漸漸地漂上來的效果

*/.v-move

.v-le**e-active

ps: 參考

帶有名字的transition-group

for='item in items' :key='item' class='flip-list-item'>}

樣式：.flip-list-enter,.flip-list-le**e-to

.flip-list-enter-active,.flip-list-le**e-active

.flip-list-move /**

* 要讓刪除的元素先脫離文件流，旁邊的元素才能過渡過來 */

.flip-list-le**e-active

三、element ui同時也內建了過度動畫

提供el-fade-in-linear和el-fade-in兩種效果。

zoom 縮放：

提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三種效果。

fade 淡入淡出

提供 el-fade-in-linear 和 el-fade-in

兩種效果。

collapse 展開摺疊

使用 el-collapse-transition 元件實現摺疊展開效果。

.el-fade-in-linear

.el-fade-in

四、transition、transform、translate的區別和聯絡

1. transform 是轉換，例如位移，縮放和旋轉，位移函式名就是translate，translate是transform的一部分。

2. transition是過渡，指的是某個css屬性值如何平滑的進行改變，就是平常說的動效。而transform是沒有動畫效果，你改變了它的值，元素的樣子就唰的改變了。

transition 基本用法：

transition： [屬性名] [持續時間] [速度曲線] [延遲時間]

transition： all 2s ease 0.5s; // 所有屬性動畫

transition： height 2s, width 3s; // 給多個屬性多個過渡

transform：轉換，基本用法

transform：[轉換函式]；

2d轉換中，通常有，位移translate(x,y), 縮放scale(x,y), 旋轉rotate(angle)

transform: translate(10px, 10px) rotate(10deg); // 向下向右平移10畫素，並順時針旋轉10度

attention: 轉換函式之間可沒有逗號。

ps:參考

.box

.box:hover

如果使用transition監聽基本屬性，例如height或width等，其值在發生改變時就會對文件流產生影響，比如下圖，滑鼠懸停的div長寬變化會把其他的div給「擠開」，甚至最邊上的還擠到了下一行。並且，可以長寬屬性在發生變化時元素的固定點不是中心，而是左上角，

因為transform只會影響當前元素的狀態，達到類似position: relative;的效果，而且transform是預設基於元素的中心進行轉換的，就算想改的話也可以使用transform-origin屬性進行修改

.box

.box:hover

transition標籤 vue動畫

vue中transition不生效的問題

vue怎麼在標籤判斷 vue 指令和標籤

animition和transition的配合

transition標籤 vue動畫

vue中transition不生效的問題

vue怎麼在標籤判斷 vue 指令和標籤

animition和transition的配合

相關推薦