您現在的位置是：首頁 > 垂釣
061_末晨曦Vue技術_過渡 & 動畫之自定義過渡的類名
- 由 前端末晨曦吖 發表于 垂釣
- 2022-09-28
undefined中文怎麼寫
自定義過渡的類名
點選開啟影片講解更加詳細
https：//www。bilibili。com/video/BV17d4y1S7Cj？p=61&vd_source=66e2692cc471862d6c3f85dc4b9ea5dd
我們可以透過以下 attribute 來自定義過渡類名：
- enter-class
- enter-active-class
- enter-to-class （2。1。8+）
- leave-class
- leave-active-class
- leave-to-class （2。1。8+）
他們的優先順序高於普通的類名，這對於 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate。css 結合使用十分有用。
首先安裝Animate.css
npm install animate。css —— save
在main.js中引入
import
Vue
from
‘vue’
import
App
from
‘。/App。vue’
import
store
from
‘。/store’
import
router
from
‘。/router’
//引入ElementUI元件庫
import
ElementUI
from
‘element-ui’
；
//引入ElementUI全部樣式
import
‘element-ui/lib/theme-chalk/index。css’
；
//引入animate。css動畫庫
import
animated
from
‘animate。css’
// npm install animate。css ——save安裝，再引入
//外掛引入
// import {Plugin1，Plugin2} from ‘。/plugins/plugins。js’
// 全域性元件註冊 // 第一個解決元件之間的迴圈引用方式
// import HelloWorld from ‘。/components/HelloWorld’
// import Category from ‘。/components/Category’
// Vue。component（‘HelloWorld’，HelloWorld）
// Vue。component（‘Category’，Category）
Vue
。
config
。
productionTip
=
false
//使用ElementUI
Vue
。
use
（
ElementUI
）
Vue
。
use
（
animated
）
// Vue。use（Plugin1，‘引數1’）
// Vue。use（Plugin2，‘引數2’）
new
Vue
（
{
store
，
router
，
render
：
h
=>
h
（
App
）
，
}
）
。
$mount
（
‘#app’
）
完整案例：
<
template
>
<
div
>
自定義過渡的類名
可以透過以下 attribute 來自定義過渡類名：
enter
-
class
enter
-
active
-
class
enter
-
to
-
class
（
2。1
。8
+
）
leave
-
class
leave
-
active
-
class
leave
-
to
-
class
（
2。1
。8
+
）
安裝Animate
。
css
=>
npm install animate
。
css
——
save
<
div id
=
“example-3”
>
<
button @click
=
“show = ！show”
>
Toggle render
<
/
button
>
<
transition
name
=
“custom-classes-transition”
enter
-
active
-
class
=
“animate__animated animate__swing”
leave
-
active
-
class
=
“animate__animated animate__flash”
>
<
p v
-
if
=
“show”
>
hello
<
/
p
>
<
/
transition
>
<
/
div
>
<
/
div
>
<
/
template
>
<
script
>
export
default
{
name
：
‘home’
，
data
（
）
{
return
{
show
：
false
}
}
，
created
（
）
{
}
，
mounted
（
）
{
}
，
computed
：
{
}
，
methods
：
{
}
}
<
/
script
>
<
style scoped
>
<
/
style
>
若對您有幫助，請點選跳轉到B站一鍵三連哦！感謝支援！！！
https：//www。bilibili。com/video/BV17d4y1S7Cj？p=61&vd_source=66e2692cc471862d6c3f85dc4b9ea5dd