微信小程序——动画：按钮控制view中的动画（向右隐藏向左显示）、按钮动画左隐藏后恢复

最新推荐文章于 2024-09-25 14:47:29 发布

wy313622821

最新推荐文章于 2024-09-25 14:47:29 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/wy313622821/article/details/114691528

本文介绍了如何在微信小程序中通过按钮控制view的动画效果，包括向右隐藏向左显示以及按钮动画左隐藏后恢复的操作。示例包含wxml、js和wxss代码片段。

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

1、按钮控制view中的动画（向右隐藏向左显示）

效果图：
在这里插入图片描述
wxml代码：

<view class="container">
  <view class="view-main" animation="{
   
   {animationData}}"></view>
  <button style="margin-top: 20px;" bindtap="bt_test">{
   
   {
   
   btTitle}}</button>
</view>

js代码：

// index.js
Page({
   
   
  data: {
   
   
    show: true,
    btTitle:"隐藏"
  },

  onLoad() {
   
   
  },

  bt_test(e) {
   
   
    console.log("333")
    if (this.data.show) {
   
   
      this.animationHide()

      this.data.show = false
      this.setData({
   
   
        btTitle:"显示"
      })
    } else {
   
   
      this