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包裹，并設置過渡的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動畫之點擊按鈕往上漸漸顯示出來的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue 的鉤子函數(shù)，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
vue中實現(xiàn)當前時間echarts圖表時間軸動態(tài)的數(shù)據(jù)(實例代碼)
這篇文章主要介紹了vue中實現(xiàn)當前時間echarts圖表時間軸動態(tài)的數(shù)據(jù)，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
Vue通過字符串關鍵字符實現(xiàn)動態(tài)渲染input輸入框
這篇文章主要為大家詳細介紹了Vue如何通過字符串關鍵字符實現(xiàn)動態(tài)渲染input輸入框。文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-12-12
Vue+ElementUI技巧之自定義表單項label的文字提示方法
這篇文章主要給大家介紹了關于Vue+ElementUI技巧之自定義表單項label文字提示的相關資料,文中通過圖文以及代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue框架里使用Swiper的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue中this.$refs獲取為undefined的原因和解決辦法(this.$refs.屬性為undefined原因
在Vue項目開發(fā)中,使用this.$refs訪問組件或DOM元素的引用時,可能會遇到獲取為undefined的情況,這篇文章主要介紹了Vue中this.$refs獲取為undefined的原因和解決辦法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了Vue首頁加載白屏原因以及10種解決方法匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細介紹了Vue中使用vux配置的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家詳細介紹了Vue用戶管理的增刪改查功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03