簡單分享一下常用的底部彈窗層或下拉框彈出層（代碼需要修改）的內容彈窗的動畫效果，這裏分享的是點擊按鈕後底部彈窗的動畫效果。第一種方式是動態設置顯示區域的高度，第二種方法是動態設置顯示區域的移動的位置（使用到transform:translateY）；
（一）實現效果
簡單說明一下，兩種方法實現的效果是一樣的，只有點擊按鈕才能出發彈窗（指定位置），彈窗彈出後，只有點擊背景灰色區域彈窗才能收回，點擊彈窗內容區域（粉紅色部分是不能收回彈窗的），自己可以自定義粉紅色部分右上角關閉按鈕。
（二）實現分析
- 第一種動態設置高度的方法是：需要一個容器爲背景色（灰色區域），一個容器爲彈窗內容（粉紅色區域），兩者是獨立的，實現的原理是一樣的；粉紅色區域的話，就是設置好絕對位置（在屏幕的底部）和默認內容的區域樣式，動態設置內容區域的高度，比如彈出：一開始高度爲0（隱藏了），通過animation設置的動畫時間，將高度從0到指定高度，內容慢慢就會顯示了，然後保留最後一幀的動畫樣式就行了；收縮也是一樣的道理。
- 第二種動態設置位置的方法是：需要一個容器爲背景色（灰色區域），一個容器爲彈窗內容（粉紅色區域），兩者是獨立的，實現的原理是一樣的；粉紅色區域的話，就是設置好絕對位置（在屏幕的底部）和默認內容的區域樣式，比如彈出：一開始粉紅色區域的位置平移在屏幕外（隱藏了），通過animation設置的動畫時間，將粉紅色區域從屏幕外平移到屏幕內（默認設置在屏幕底部的位置），內容慢慢就會顯示了，然後保留最後一幀的動畫樣式就行了；收縮也是一樣的道理。
代碼也有註釋哈。
（三）實現代碼
第一種動態設置高度方法實現：
1、wxml代碼：
<button catchtap='clickPup'>點擊底部動畫彈窗</button>
<!-- 底部彈窗動畫的內容 -->
<view class='pupContent {{click? "showContent": "hideContent"}} {{option? "open": "close"}}' hover-stop-propagation='true'>
<view class='pupContent-top'>測試一下</view>
</view>
<!-- 固定的背景 -->
<view class='pupContentBG {{click?"showBG":"hideBG"}} {{option?"openBG":"closeBG"}}' catchtap='clickPup'>
</view>
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%);
}
}
參考資料：
感謝閱讀。