微信小程式之animation底部彈窗動畫（兩種方法）

猿來獨往發表於2019-03-04
微信小程式動畫

簡單分享一下常用的底部彈窗層或下拉框彈出層（程式碼需要修改）的內容彈窗的動畫效果，這裡分享的是點選按鈕後底部彈窗的動畫效果。第一種方式是動態設定顯示區域的高度，第二種方法是動態設定顯示區域的移動的位置（使用到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%);
  }
}
複製程式碼

參考資料：

感謝閱讀。

相關文章