微信小程序原生实现自定义动画弹框教程

本示例介绍如何在微信小程序中使用原生方法实现自定义动画弹框和提示框，主要通过CSS3动画来完成。 在微信小程序开发中，为了提供良好的用户体验，经常会需要实现各种交互式的提示效果，如底部弹出框、顶部提示框等。这些效果通常可以通过引入第三方UI库来快速实现，但对于简单的功能，我们也可以选择不依赖外部库，而是使用小程序自身的API和CSS3动画来自定义实现。 首先，WXML（微信小程序标记语言）部分，我们可以看到有两个按钮，分别绑定了`onBottomBox`和`onTopBox`事件处理函数，用于触发底部弹出框和顶部提示框的显示。同时，根据`isBottom`和`isTop`的布尔值控制弹框的显示或隐藏。在弹框结构中，包含一个遮罩层（mask）和实际的内容区域（pop或top-box），遮罩层用于点击后关闭弹框。 接着，我们看WXSS（微信小程序样式语言）部分。`.click-btn`类定义了按钮的基本样式，包括尺寸、边框和内边距。`.top-box`和`.bottom-box`分别定义了顶部提示框和底部弹出框的样式。`.top-box`设置了动画效果，利用`animation-duration`和`animation-name`属性，配合定义的动画`slidetop`，实现在顶部滑入的效果。`.mask`类定义了遮罩层的全屏覆盖样式，并设置了一个半透明的背景色。 实现动画的关键在于CSS3的`@keyframes`规则，如下： ```css @keyframes slidetop { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } ``` 这个动画定义了元素从屏幕下方移动到屏幕顶部的过程。`0%`表示动画开始时，元素的位置在屏幕下方100%的距离；`100%`表示动画结束时，元素完全滑动到屏幕顶部。`transform: translateY()`属性用于改变元素的垂直位置。 在JavaScript部分，你需要实现`onBottomBox`、`onTopBox`和`onHideBox`函数。例如，`onBottomBox`和`onTopBox`可以用来切换`isBottom`和`isTop`的状态，展示或隐藏相应的弹框。`onHideBox`则用于监听遮罩层的点击事件，关闭弹框。 通过结合WXML、WXSS和JavaScript，我们可以自定义微信小程序中的动画弹框和提示框，而无需依赖外部库，这不仅减少了项目的体积，也提供了更好的控制和灵活性。