vue動畫之點擊按鈕往上漸漸顯示出來的實例
更新時間：2018年09月29日 12:00:39 作者：小仙女de成長
今天小編就為大家分享一篇vue動畫之點擊按鈕往上漸漸顯示出來的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style>
.box{
height:500px;
background-color:black;
overflow: hidden; }
//給過渡的name加樣式
.mybox-leave-active,.mybox-enter-active{
transition: all 1s ease;
}
.mybox-leave-active,.mybox-enter{
height:0px !important;
}
.mybox-leave,.mybox-enter-active{
height: 500px;
}
</style>
</head><body>
<!-- 首先將要過渡的元素用transition包裹，并設(shè)置過渡的name） -->
<div id="box">
<transition name="mybox">
<div class="box" v-show="boxshow"></div>
</transition>
<button @click="togglebox">按鈕</button>
</div>
<script>
new Vue({
el:'#box',
data:{
boxshow:false
},
methods:{
togglebox:function(){
this.boxshow = !this.boxshow;
}
}
});
</script>
</body>
</html>
以上這篇vue動畫之點擊按鈕往上漸漸顯示出來的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作
這篇文章主要介紹了vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue 使用中的小技巧,是小編日常開發(fā)的時候用到的小技巧，需要的朋友可以參考下2018-04-04
vue中keep-alive內(nèi)置組件緩存的實例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
vue.js 實現(xiàn)v-model與{{}}指令方法
這篇文章主要介紹了vue.js 實現(xiàn)v-model與{{}}指令方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案
這篇文章主要介紹了詳解vue-cli 3.0 build包太大導(dǎo)致首屏過長的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
本篇文章主要介紹了詳解axios中文文檔，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章通過實例代碼給大家介紹了vue-父子組件傳值和ref獲取dom和組件的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
平常使用Vue開發(fā)時,一個項目中多個地方需要用到的相同組件通常我們會封裝為一個公共組件,所以我們可以將封裝好的組件打包發(fā)布至npm,本文主要介紹了vue組件發(fā)布成npm包,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了vue路由的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue路由知識，感興趣的朋友可以了解下2020-08-08
在這篇文章中,我們將學(xué)習(xí)一下 Vue3 的全局組件注冊是如何實現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12