快捷導(dǎo)航

基于vue展開收起動畫的示例代碼

更新時間：2018年07月05日 16:08:17 作者：xilong

這篇文章主要介紹了基于vue展開收起動畫的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

之前用jquery實現(xiàn)還很簡單，然后用vue就一直不行，然后在網(wǎng)上找了很多，又仔細看了vue官網(wǎng) 的過渡&動畫，發(fā)現(xiàn)其實很簡單 (可以多看vue官網(wǎng) 過渡&動畫實現(xiàn)更多效果)

1、實際效果

2、代碼

<!--css-->
.box{
  height:200px;width: 200px;
  background-color:black;
}
.draw-enter-active, .draw-leave-active {
  transition: all 1s ease;
}
.draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 0;
}

<div id="app">
  <button @click="boxshow = !boxshow">點擊展開/關(guān)閉</button>
  <transition name="draw">  <!--這里的name 和 css 類名第一個字段要一樣-->
    <div class="box" v-show="boxshow"></div>
  </transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
      boxshow:false
    },
  });
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3?Composition?API優(yōu)雅封裝第三方組件實例
這篇文章主要為大家介紹了Vue3?Composition?API優(yōu)雅封裝第三方組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
Vue3中v-for的使用示例詳解
本文主要介紹了Vue3中v-for的使用方法,包括遍歷數(shù)組、遍歷對象、索引訪問、嵌套遍歷以及結(jié)合計算屬性和方法的使用,v-for可以幫助用戶動態(tài)地生成和管理列表數(shù)據(jù),并根據(jù)需要進行復(fù)雜的DOM操作,提供了多種示例,幫助讀者更好地理解和使用v-for
2024-10-10
Vue常用API、高級API的相關(guān)總結(jié)
這篇文章主要介紹了Vue常用API、高級API的相關(guān)總結(jié)，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-02-02
vue2 elementui if導(dǎo)致的rules判斷失效的解決方法
文章討論了在使用Vue2和ElementUI時,將if語句放在el-form-item內(nèi)導(dǎo)致rules判斷失效的問題,并提出了將判斷邏輯移到外部的解決方案,感興趣的朋友一起看看吧
2024-12-12
Vue實現(xiàn)文件上傳和下載功能
這篇文章主要為大家詳細介紹了Vue實現(xiàn)文件上傳和下載功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue原生方法自定義右鍵菜單
這篇文章主要為大家詳細介紹了vue原生方法自定義右鍵菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
教你在vue?中使用?svg?symbols
這篇文章主要介紹了如何在?vue?中使用?svg?symbols，本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2022-08-08
詳解如何在Vue項目中實現(xiàn)累加動畫
這篇文章主要為大家詳細介紹了如何在你的Vue項目中實現(xiàn)累加動畫，文中的示例代碼簡潔易懂，具有一定的參考價值，感興趣的小伙伴可以了解一下
2023-06-06
Vue3+vite實現(xiàn)使用svg可改變顏色的全過程
Vue3 + Vite 使用 SVG 的方法主要是為了引入和利用圖標(biāo)庫、自定義組件以及通過插件簡化項目構(gòu)建過程,這篇文章給大家介紹了Vue3+vite實現(xiàn)使用svg可改變顏色的全過程,需要的朋友可以參考下
2024-07-07
一文徹底搞懂Vue的MVVM響應(yīng)式原理
這篇文章主要介紹了一文徹底搞懂Vue的MVVM響應(yīng)式原理，vue則是采用發(fā)布者-訂閱者模式，通過Object.defineProperty()來劫持各個屬性的getter和setter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)
2022-06-06