小程序弹窗动画

最新推荐文章于 2025-07-15 14:10:15 发布

原创最新推荐文章于 2025-07-15 14:10:15 发布 · 540 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#弹层 #动画

微信小程序同时被 2 个专栏收录

15 篇文章

订阅专栏

支付宝小程序

8 篇文章

订阅专栏

本文介绍了如何在小程序中创建弹窗并实现平滑的动画效果。通过展示wxml、wxss和js代码，详细讲解了弹窗组件的布局、样式设置以及动画逻辑的实现，帮助读者掌握小程序中弹层动画的开发技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml代码如下

<view wx:if="{{markStatus}}" class='mark'>
  <view class='approval-box bottom-pos' animation="{{animationData}}">
    <view class='mark-title flex-sb plr30'>
      <view bindtap='cancelMark' class='fs28'>取消</view>
      <view class='fs28 colorQgreen'>确认</view>
    </view>
    <view class='mark-content plr30'>
       //自己的弹出内容
      </view>
    </view>
  </view>
</view>

wxss代码如下

.mark{
  position: fixed;
  background: rgba(0, 0, 0, .5);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
}
.bottom-pos{-webkit-transform:translateY(100%);transform:translateY(100%);}
.approval-box{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: #ffffff;
}

js代码如下

Page({

	  /**
	   * 页面的初始数据
	   */
	  data: {
	    markStatus: false,
	    animationData: {},//弹层动画
	  },

	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad: function (options) {
	
	  },
	markShow: function(){
	    this.setData({
	      markStatus: true,
	      textareaTf: true,
	    })
	    var animation = wx.createAnimation();
	    this.animation = animation
	    this.fadeIn();
	  },
	  cancelMark: function(){
	    var that = this;
	    this.setData({
	      textareaTf: false
	    })
	    var animation = wx.createAnimation();
	    this.animation = animation
	    that.fadeDown(); 
	    setTimeout(function () {
	      that.setData({
	        markStatus: false
	      })
	    }, 300)
	  },
	  fadeIn: function () {
	    this.animation.translateY(0).step();
	    this.setData({
	      animationData: this.animation.export()
	    })
	  },
	  fadeDown: function () {
	    this.animation.translateY(300).step();
	    this.setData({
	      animationData: this.animation.export(),
	    })
	  }, 
  })