vue.js過渡(vue學(xué)習(xí)記錄2)

pinecone 發(fā)布于2019-08-19 18:36 / 3614人閱讀

html代碼：

      hello

必須要添加CSS樣式（該樣式來控制狀態(tài)）：

.expand-transition {
          transition: all .3s ease;
          height: 30px;
          padding: 10px;
          background-color: #eee;
          overflow: hidden;
        }
        .expand-enter, .expand-leave {
          height: 0;
          padding: 0 10px;
          opacity: 0;
        }

同時(shí)提供鉤子：

    new Vue({
  el: "#demo",
  data: {
    show: true
  },
  transitions: {
    expand: {
      beforeEnter: function (el) {
        el.textContent = "beforeEnter"
      },
      enter: function (el) {
        el.textContent = "enter"
      },
      afterEnter: function (el) {
        el.textContent = "afterEnter"
      },
      beforeLeave: function (el) {
        el.textContent = "beforeLeave"
      },
      leave: function (el) {
        el.textContent = "leave"
      },
      afterLeave: function (el) {
        el.textContent = "afterLeave"
      }
    }
  }
})

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79757.html

相關(guān)文章

初學(xué)vue.js記錄

摘要：初學(xué)應(yīng)該學(xué)習(xí)哪些知識主要學(xué)習(xí)基礎(chǔ)知識。接下來要學(xué)習(xí)如何寫函數(shù)，計(jì)算屬性。事件處理與修飾符事件通過指令來綁定，在中事件為事件名，所以是很好記憶的。這時(shí)可通過來獲取父組件傳遞的值并寫入模板，父組件可通過在子組件寫入屬性的方式傳遞數(shù)據(jù)。前言本人剛開始學(xué)習(xí)vue.js幾天，做了一些練習(xí)之后，鑒于每隔一段時(shí)間就把學(xué)習(xí)過的內(nèi)容總結(jié)一番，故此寫下此文章。初學(xué)Vue.js應(yīng)該學(xué)習(xí)哪些知識 1、 v...

enda 2019-08-22 15:34 評論0 收藏0
VUE2.0學(xué)習(xí)筆記

摘要：添加事件偵聽器時(shí)使用模式。只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)。差別在哪里將特性名轉(zhuǎn)換為從開始支持語法糖，會擴(kuò)展成一個(gè)更新父組件綁定值的偵聽器。如果需要條件渲染多個(gè)元素，可以使用包裹。 1.前言安裝直接用引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 評論0 收藏0
vue學(xué)習(xí)筆記（二）

摘要：供用戶在相應(yīng)的階段對其進(jìn)行操作。我們像下面這樣使用這個(gè)指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個(gè)常用的參數(shù)和。其他用法與全局自定義指令一致。一、vue生命周期 vue實(shí)例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個(gè)階段。這八個(gè)階段里分別有一個(gè)叫做鉤子函數(shù)的實(shí)例選項(xiàng)。供用戶在相應(yīng)的階段對其進(jìn)行操作。 beforeCreate(){ //組件實(shí)例剛...

klivitamJ 2019-08-30 13:48 評論0 收藏0
vue學(xué)習(xí)筆記（二）

摘要：供用戶在相應(yīng)的階段對其進(jìn)行操作。我們像下面這樣使用這個(gè)指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個(gè)常用的參數(shù)和。其他用法與全局自定義指令一致。一、vue生命周期 vue實(shí)例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個(gè)階段。這八個(gè)階段里分別有一個(gè)叫做鉤子函數(shù)的實(shí)例選項(xiàng)。供用戶在相應(yīng)的階段對其進(jìn)行操作。 beforeCreate(){ //組件實(shí)例剛...

Pines_Cheng 2019-08-21 17:08 評論0 收藏0
vue學(xué)習(xí)筆記（二）

摘要：供用戶在相應(yīng)的階段對其進(jìn)行操作。我們像下面這樣使用這個(gè)指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡寫形式鉤子函數(shù)有兩個(gè)常用的參數(shù)和。其他用法與全局自定義指令一致。一、vue生命周期 vue實(shí)例從創(chuàng)建到銷毀的過程，稱為生命周期，共有八個(gè)階段。這八個(gè)階段里分別有一個(gè)叫做鉤子函數(shù)的實(shí)例選項(xiàng)。供用戶在相應(yīng)的階段對其進(jìn)行操作。 beforeCreate(){ //組件實(shí)例剛...

ideaa 2019-08-01 17:48 評論0 收藏0