小程序底部弹窗css_微信小程序之animation底部弹窗动画(两种方法)
簡單分享一下常用的底部彈窗層或下拉框彈出層(代碼需要修改)的內(nèi)容彈窗的動畫效果,這里分享的是點擊按鈕后底部彈窗的動畫效果。第一種方式是動態(tài)設(shè)置顯示區(qū)域的高度,第二種方法是動態(tài)設(shè)置顯示區(qū)域的移動的位置(使用到?transform:translateY?);
(一)實現(xiàn)效果
簡單說明一下,兩種方法實現(xiàn)的效果是一樣的,只有點擊按鈕才能出發(fā)彈窗(指定位置),彈窗彈出后,只有點擊背景灰色區(qū)域彈窗才能收回,點擊彈窗內(nèi)容區(qū)域(粉紅色部分是不能收回彈窗的),自己可以自定義粉紅色部分右上角關(guān)閉按鈕。
(二)實現(xiàn)分析
第一種動態(tài)設(shè)置高度的方法是:需要一個容器為背景色(灰色區(qū)域),一個容器為彈窗內(nèi)容(粉紅色區(qū)域),兩者是獨立的,實現(xiàn)的原理是一樣的;粉紅色區(qū)域的話,就是設(shè)置好絕對位置(在屏幕的底部)和默認(rèn)內(nèi)容的區(qū)域樣式,動態(tài)設(shè)置內(nèi)容區(qū)域的高度,比如彈出:一開始高度為0(隱藏了),通過animation設(shè)置的動畫時間,將高度從0到指定高度,內(nèi)容慢慢就會顯示了,然后保留最后一幀的動畫樣式就行了;收縮也是一樣的道理。
第二種動態(tài)設(shè)置位置的方法是:需要一個容器為背景色(灰色區(qū)域),一個容器為彈窗內(nèi)容(粉紅色區(qū)域),兩者是獨立的,實現(xiàn)的原理是一樣的;粉紅色區(qū)域的話,就是設(shè)置好絕對位置(在屏幕的底部)和默認(rèn)內(nèi)容的區(qū)域樣式,比如彈出:一開始粉紅色區(qū)域的位置平移在屏幕外(隱藏了),通過animation設(shè)置的動畫時間,將粉紅色區(qū)域從屏幕外平移到屏幕內(nèi)(默認(rèn)設(shè)置在屏幕底部的位置),內(nèi)容慢慢就會顯示了,然后保留最后一幀的動畫樣式就行了;收縮也是一樣的道理。 代碼也有注釋哈。
(三)實現(xiàn)代碼
第一種動態(tài)設(shè)置高度方法實現(xiàn):
1、wxml代碼:
點擊底部動畫彈窗 測試一下 復(fù)制代碼
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;
}
/* 設(shè)置顯示的背景 */
.showBG {
display: block;
}
.hideBG {
display: none;
}
/* 彈出或關(guān)閉動畫來動態(tài)設(shè)置內(nèi)容高度 */
@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;
}
}
/* 顯示或關(guān)閉內(nèi)容時動畫 */
.openBG {
animation: slideBGtUp 0.5s ease-in both;
/* animation-fill-mode: both 動畫將會執(zhí)行 forwards 和 backwards 執(zhí)行的動作。 */
}
.closeBG {
animation: slideBGDown 0.5s ease-in both;
/* animation-fill-mode: both 動畫將會執(zhí)行 forwards 和 backwards 執(zhí)行的動作。 */
}
/* 設(shè)置顯示內(nèi)容 */
.showContent {
display: block;
}
.hideContent {
display: none;
}
/* 彈出或關(guān)閉動畫來動態(tài)設(shè)置內(nèi)容高度 */
@keyframes slideContentUp {
from {
height: 0;
}
to {
height: 800rpx;
}
}
@keyframes slideContentDown {
from {
height: 800rpx;
}
to {
height: 0;
}
}
/* 顯示或關(guān)閉內(nèi)容時動畫 */
.open {
animation: slideContentUp 0.5s ease-in both;
/* animation-fill-mode: both 動畫將會執(zhí)行 forwards 和 backwards 執(zhí)行的動作。 */
}
.close {
animation: slideContentDown 0.5s ease-in both;
/* animation-fill-mode: both 動畫將會執(zhí)行 forwards 和 backwards 執(zhí)行的動作。 */
}
復(fù)制代碼
3、js代碼:
data: {
click: false, //是否顯示彈窗內(nèi)容
option: false, //顯示彈窗或關(guān)閉彈窗的操作動畫
},
// 用戶點擊顯示彈窗
clickPup: function(){
let _that = this;
if (!_that.data.click) {
_that.setData({
click: true,
})
}
if (_that.data.option) {
_that.setData({
option: false,
})
// 關(guān)閉顯示彈窗動畫的內(nèi)容,不設(shè)置的話會出現(xiàn):點擊任何地方都會出現(xiàn)彈窗,就不是指定位置點擊出現(xiàn)彈窗了
setTimeout(() => {
_that.setData({
click: false,
})
}, 500)
} else {
_that.setData({
option: true
})
}
},
復(fù)制代碼
第二種動態(tài)平移內(nèi)容區(qū)域位置方法實現(xiàn):
相對于第一種代碼修改的部分:只修改的了粉紅色區(qū)域的高度和粉紅色區(qū)域彈出和收回的動畫效果:
/* 彈出或關(guān)閉動畫來動態(tài)設(shè)置內(nèi)容高度 */
@keyframes slideContentUp {
from {
transform: translateY(100%); /*設(shè)置為正數(shù)則底部彈出來,負(fù)數(shù)則相反*/
}
to {
transform: translateY(0%);
}
}
@keyframes slideContentDown {
from {
transform: translateY(0%);
}
to {
transform: translateY(100%);
}
}
復(fù)制代碼
參考資料:
感謝閱讀。
總結(jié)
以上是生活随笔為你收集整理的小程序底部弹窗css_微信小程序之animation底部弹窗动画(两种方法)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: pandas 第一行_用Excel表格带
- 下一篇: 单片机传输浮点数给android,请问单