微信小程序之动画篇

最新推荐文章于 2024-08-03 12:36:11 发布

海阳盼

最新推荐文章于 2024-08-03 12:36:11 发布

阅读量1.2k

点赞数

分类专栏：开发小程序文章标签：小程序动画 transition animation

本文链接：https://blog.csdn.net/SeaSunExpect/article/details/90265963

版权

本文详细介绍了如何使用transition和animation在微信小程序中实现淡入淡出的动画效果，包括WXML、WXSS和JS的具体实现。通过对比，指出transition简单易用但需事件触发，不支持重复动画和中间状态；而animation则能实现更复杂的动画控制。

摘要由CSDN通过智能技术生成

小程序动画两种实现方式

利用transition和animation两种方式实现相同的淡入淡出效果

利用transition和animation两种方式实现相同的淡入淡出效果

主要是实现点击展示按钮，按钮消失，菜单有底部缓缓滑入界面；点击菜单中关闭按钮，展示按钮显示，菜单缓缓从底部收回。

废话不多说，直接先上效果图，看效果。

transition实现的动画效果

动画实现之transition方式

animation实现的相同的动画效果（不同之处，在菜单中加入了内容，同样transition中也可以加入内容）

transition动画实现效果具体内容

transition动画实现效果的WXML

<!-- transition 动画 -->
<button
	type="primary"
	hidden='{
    {extraClasses}}'
	bindtap="toggleTransition"
	class="show">
		展示
</button>
<view class="section {
    {extraClasses}}" bindtap="toggleTransition">
  <button class="close" catchtap="transitionClose">
    <icon type="clear"></icon>
  </button>
</view>

transition动画实现效果的WXSS

.show {
   
  position: relative;
  z-index: 9;
}
.section {
   
  width: 100%;
  height: 1334rpx;
  color:#000;
  position: relative;
  z-index: 10;
  background: rgb(112, 120, 235);
  opacity: