最近在开发微信小程序的时候有同意协议的功能,需要在没给同意协议单选框打上勾的时候点击下一步晃动单选框,查阅资料后总结了如下实现方式:
在.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); // 设置摇晃动画持续时间,单位为毫秒
}
})
以上就是实现点击按钮文字左右晃动提醒的示例。