微信小程序点击按钮，指定文字左右晃动提醒

最近在开发微信小程序的时候有同意协议的功能，需要在没给同意协议单选框打上勾的时候点击下一步晃动单选框，查阅资料后总结了如下实现方式：
在.wxml文件中：

<view class="container">
  <button bindtap="startShake">点击摇晃</button>
  <text class="{{shaking ? 'shake' : ''}}">要摇晃的文字</text>
</view>

在.wxss文件中：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

button {
  background-color: #007AFF;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.shake {
  animation: shake 0.5s ease-in-out;
  animation-iteration-count: 2; /* 摇晃两次 */
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

在.js文件中：

Page({
  data: {
    shaking: false
  },

  startShake: function() {
    this.setData({
      shaking: true
    });

    setTimeout(() => {
      this.setData({
        shaking: false
      });
    }, 1000); // 设置摇晃动画持续时间，单位为毫秒
  }
})

以上就是实现点击按钮文字左右晃动提醒的示例。