初创公司网站设计苏州,前端vue,可以做兼职的网站,如何在虚拟机中建设网站简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果#xff0c;这里分享的是点击按钮后底部弹窗的动画效果。第一种方式是动态设置显示区域的高度#xff0c;第二种方法是动态设置显示区域的移动的位置(使用到 transform:translateY )#xff1…简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果这里分享的是点击按钮后底部弹窗的动画效果。第一种方式是动态设置显示区域的高度第二种方法是动态设置显示区域的移动的位置(使用到 transform:translateY )(一)实现效果 简单说明一下两种方法实现的效果是一样的只有点击按钮才能出发弹窗(指定位置)弹窗弹出后只有点击背景灰色区域弹窗才能收回点击弹窗内容区域(粉红色部分是不能收回弹窗的)自己可以自定义粉红色部分右上角关闭按钮。(二)实现分析第一种动态设置高度的方法是需要一个容器为背景色(灰色区域)一个容器为弹窗内容(粉红色区域)两者是独立的实现的原理是一样的粉红色区域的话就是设置好绝对位置(在屏幕的底部)和默认内容的区域样式动态设置内容区域的高度比如弹出一开始高度为0(隐藏了)通过animation设置的动画时间将高度从0到指定高度内容慢慢就会显示了然后保留最后一帧的动画样式就行了收缩也是一样的道理。第二种动态设置位置的方法是需要一个容器为背景色(灰色区域)一个容器为弹窗内容(粉红色区域)两者是独立的实现的原理是一样的粉红色区域的话就是设置好绝对位置(在屏幕的底部)和默认内容的区域样式比如弹出一开始粉红色区域的位置平移在屏幕外(隐藏了)通过animation设置的动画时间将粉红色区域从屏幕外平移到屏幕内(默认设置在屏幕底部的位置)内容慢慢就会显示了然后保留最后一帧的动画样式就行了收缩也是一样的道理。 代码也有注释哈。(三)实现代码第一种动态设置高度方法实现1、wxml代码点击底部动画弹窗 测试一下 复制代码2、wxss代码.pupContentBG {width: 100vw;height: 100vh;position: fixed;top: 0;}.pupContent {width: 100%;background: pink;position: absolute;bottom: 0;box-shadow: 0 0 10rpx #333;height: 0;z-index: 999;}/* 设置显示的背景 */.showBG {display: block;}.hideBG {display: none;}/* 弹出或关闭动画来动态设置内容高度 */keyframes slideBGtUp {from {background: transparent;}to {background: rgba(0, 0, 0, 0.1);}}keyframes slideBGDown {from {background: rgba(0, 0, 0, 0.1);}to {background: transparent;}}/* 显示或关闭内容时动画 */.openBG {animation: slideBGtUp 0.5s ease-in both;/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */}.closeBG {animation: slideBGDown 0.5s ease-in both;/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */}/* 设置显示内容 */.showContent {display: block;}.hideContent {display: none;}/* 弹出或关闭动画来动态设置内容高度 */keyframes slideContentUp {from {height: 0;}to {height: 800rpx;}}keyframes slideContentDown {from {height: 800rpx;}to {height: 0;}}/* 显示或关闭内容时动画 */.open {animation: slideContentUp 0.5s ease-in both;/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */}.close {animation: slideContentDown 0.5s ease-in both;/* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */}复制代码3、js代码data: {click: false, //是否显示弹窗内容option: false, //显示弹窗或关闭弹窗的操作动画},// 用户点击显示弹窗clickPup: function(){let _that this;if (!_that.data.click) {_that.setData({click: true,})}if (_that.data.option) {_that.setData({option: false,})// 关闭显示弹窗动画的内容不设置的话会出现点击任何地方都会出现弹窗就不是指定位置点击出现弹窗了setTimeout(() {_that.setData({click: false,})}, 500)} else {_that.setData({option: true})}},复制代码第二种动态平移内容区域位置方法实现相对于第一种代码修改的部分只修改的了粉红色区域的高度和粉红色区域弹出和收回的动画效果/* 弹出或关闭动画来动态设置内容高度 */keyframes slideContentUp {from {transform: translateY(100%); /*设置为正数则底部弹出来负数则相反*/}to {transform: translateY(0%);}}keyframes slideContentDown {from {transform: translateY(0%);}to {transform: translateY(100%);}}复制代码参考资料感谢阅读。
