vue中怎样实现弹出层动画效果？由上而下渐渐显示

<template><div class="home"><!-- 首先将要过渡的元素用transition包裹，并设置过渡的name --><transition name="mybox"><div class="box" v-show="boxshow"></div></transition><button @click="togglebox">按钮</button></div>
</template>

data() {return {boxshow: false,};},

 methods: {togglebox: function () {this.boxshow = !this.boxshow;},},

样式：

<style lang="scss" scoped>
.box {height: 500px;background-color: rgb(245, 224, 224);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>

效果

vue中怎样实现弹出层动画效果？由上而下渐渐显示相关推荐

vue中怎样实现弹出层动画效果？由上而下渐渐显示---封装成复用组件
子组件: <template><div class="home"><!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --& ...
点击页面弹出文字动画效果
点击页面弹出文字动画效果 introduce 在博客园查询资料的时候,经常会有一些小的惊喜,比如点击页面,会弹出一些文字,向上浮动,然后消失,显得无聊,我就做了一个demo tool 首推vscode ...
js layui 弹出子窗体_Layui中JS实现弹出层的应用
点我 //弹出一个页面层 var oBtn = document.getElementById('tab_1'); oBtn.onclick = function (){ layer.open({ t ...
Android高效率实现弹出带动画效果的对话框，仿照微信对话框效果
转载请注明出处: http://blog.csdn.net/jakeyangchina/article/details/53423453 看到很多app页面里都有弹出对话框效果,今天使用PopupWi ...
Js实现点击超链接弹出层，效果仿Discuz登录！
主要应用到的是dispaly:none 和 dispaly:block;来控制实现的: <a id="link" href="#" onclick=&qu ...
Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...
jQuery mobile 中div圆角弹出层
HTML: <div id="div_layer" class="div_layer">已经是最后一个题目</div> CSS: .di ...
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别！
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
Layer 弹出层组件
Layer 弹出层组件一.Layer是什么? 用于实现网页中的各种弹出层交互, 如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab ...

vue中怎样实现弹出层动画效果？由上而下渐渐显示

vue中怎样实现弹出层动画效果？由上而下渐渐显示相关推荐

最新文章

热门文章