欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深入理解Vue的過(guò)度與動(dòng)畫(huà)

 更新時(shí)間：2021年11月19日 15:52:34   作者：維生素D沒(méi)有用  
這篇文章主要為大家介紹了Vue的過(guò)度與動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

1.在插入、更新、移除DOM元素時(shí)，在合適的時(shí)候給元素添加樣式類名

2.元素有一個(gè)進(jìn)入過(guò)程：Enter，一個(gè)離開(kāi)過(guò)程Leave。

兩個(gè)過(guò)程都有一個(gè)初始態(tài)（）和終止態(tài)（-to）和兩態(tài)之間的過(guò)度效果（activate）

3.寫(xiě)法

動(dòng)畫(huà)：寫(xiě)好v-enter-active（替換come這個(gè)名字）和v-leave-active（替換go）（這兩個(gè)是vue的工作）和動(dòng)畫(huà)atguigu（這個(gè)是css3的效果）。再用<transition>把動(dòng)畫(huà)元素包起來(lái)就行。appear是讓元素一加載就執(zhí)行一次v-enter-activate

過(guò)度：這里的起點(diǎn)終點(diǎn)是vue的作用。

或者

<style scoped>
/* .todo-enter-active{
    animation: myAnamite 1s;
}
.todo-leave-active{
    animation: myAnamite 1s reverse;
}
@keyframes myAnamite {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0);
    }
} */
.todo-enter,.todo-leave-to{
    transform: translateX(-100%);
}
.todo-leave,.todo-enter-to{
    transform: translateX(0);
}
.todo-enter-active,.todo-leave-active{
    transition: 1s linear;
}
</style>

多個(gè)元素過(guò)度：

第三方動(dòng)畫(huà)庫(kù)：anamite.css庫(kù)

安裝：

引入：在script中 import ‘a(chǎn)nimate.css'

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • 詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot

    詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot

    本篇文章給大家通過(guò)代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識(shí)，有這方面興趣的朋友參考下吧。
    2018-01-01
  • vue3數(shù)據(jù)更新而視圖未更新問(wèn)題解決

    vue3數(shù)據(jù)更新而視圖未更新問(wèn)題解決

    本文主要介紹了vue3?解決數(shù)據(jù)更新而視圖未更新問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-10-10
  • 詳解如何用VUE寫(xiě)一個(gè)多用模態(tài)框組件模版

    詳解如何用VUE寫(xiě)一個(gè)多用模態(tài)框組件模版

    這篇文章主要介紹了詳解如何用VUE寫(xiě)一個(gè)多用模態(tài)框組件模版，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • Vue3中使用this的詳細(xì)教程

    Vue3中使用this的詳細(xì)教程

    在vue3中新的組合式API中沒(méi)有this,那我們?nèi)绻枰玫絫his怎么辦?下面這篇文章主要給大家介紹了關(guān)于Vue3中使用this的詳細(xì)教程,需要的朋友可以參考下
    2023-07-07
  • vue如何自定義地址設(shè)置@

    vue如何自定義地址設(shè)置@

    這篇文章主要介紹了vue如何自定義地址設(shè)置@，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-03-03
  • 在Vue中使用Echarts實(shí)例圖的方法實(shí)例

    在Vue中使用Echarts實(shí)例圖的方法實(shí)例

    這篇文章主要給大家介紹了關(guān)于如何在Vue中使用Echarts實(shí)例圖的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • 詳解Vue 單文件組件的三種寫(xiě)法

    詳解Vue 單文件組件的三種寫(xiě)法

    這篇文章主要介紹了詳解Vue 單文件組件的三種寫(xiě)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • Vue3中使用富文本編輯器的示例詳解

    Vue3中使用富文本編輯器的示例詳解

    這篇文章主要為大家詳細(xì)介紹了Vue3中使用富文本編輯器的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考一下
    2023-10-10
  • vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例

    vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例

    本篇文章主要介紹了vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • Vue3使用customRef封裝防抖函數(shù)的方法詳解

    Vue3使用customRef封裝防抖函數(shù)的方法詳解

    防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時(shí)間內(nèi),只響應(yīng)最后一次,如果在指定的時(shí)間內(nèi)再次觸發(fā),則重新計(jì)算時(shí)間,本文將給大家詳細(xì)的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下
    2023-09-09

最新評(píng)論