小程序
小游戏
企业微信
微信支付
扫描小程序码分享
animation-play-state在ios中失效无法解决,又不能直接操作wxml,怎么解决?
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
怀疑是iOS本身的问题。建议测试一下iOS下普通网页是否有相同问题。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
请详细描述问题,并提供可复现问题的代码示例。
旋转(播放暂停会出现卡顿BUG,安卓跟微信开发工具没有出现)
index.js
//index.js
Page({
data: {
playing:false
},
bingclick: function (e) {
if (this.data.playing) {
this.setData({ playing: false })
} else {
this.setData({ playing: true })
}
})
index.wxml
<!--index.wxml-->
<view class="container">
<label>点击红色正方形(旋转/暂停)</label>
<view class="kuang" style="animation-play-state:{{playing?'running':'paused'}} !important" bindtap="bingclick"></view>
</view>
index.wxss
/**index.wxss**/
@keyframes circle{0%{transform: rotate(0deg)}100%{ transform: rotate(360deg)}}
.kuang{
margin: 160rpx auto 0;
position: relative;
z-index: 10;
width: 400rpx;
height: 400rpx;
-webkit-animation: circle 20s linear infinite;
-moz-animation: circle 20s linear infinite;
animation: circle 20s linear infinite;
background-color: red;
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
怀疑是iOS本身的问题。建议测试一下iOS下普通网页是否有相同问题。
请详细描述问题,并提供可复现问题的代码示例。
旋转(播放暂停会出现卡顿BUG,安卓跟微信开发工具没有出现)
index.js
//index.js
Page({
data: {
playing:false
},
bingclick: function (e) {
if (this.data.playing) {
this.setData({ playing: false })
} else {
this.setData({ playing: true })
}
}
})
index.wxml
<!--index.wxml-->
<view class="container">
<label>点击红色正方形(旋转/暂停)</label>
<view class="kuang" style="animation-play-state:{{playing?'running':'paused'}} !important" bindtap="bingclick"></view>
</view>
index.wxss
/**index.wxss**/
@keyframes circle{0%{transform: rotate(0deg)}100%{ transform: rotate(360deg)}}
.kuang{
margin: 160rpx auto 0;
position: relative;
z-index: 10;
width: 400rpx;
height: 400rpx;
-webkit-animation: circle 20s linear infinite;
-moz-animation: circle 20s linear infinite;
animation: circle 20s linear infinite;
background-color: red;
}