5216关注17324浏览
对于cover-image 设置动画, 无论是直接写@keyframes还是使用API wx.createAnimation,只要使用了opacity并且设置数值不为1,则在IOS小程序真机上该动画不会显示, 在安卓和模拟机上都是好的。
文档上cover-image是支持opacity的
使用API ——wx.createAnimation:
var loveAnimation = wx.createAnimation({
duration: 3000,
timingFunction: 'linear',
});
this.loveAnimation = loveAnimation;
this.loveAnimation.translate(0, -60).opacity(0.5).step({ duration: 1000 })
this.setData({
loveUpData: this.loveAnimation.export()
})
使用wxss直接定义keyframes:
.love-icon{
position: absolute;
z-index: 100;
bottom: 240rpx;
right: 90rpx;
width: 44rpx;
height: 42rpx;
}
.love-icon.right{
animation: love-right-up 1s linear 0s infinite;
}
.love-icon.left{
animation: love-left-up 1s linear 0.5s infinite;
}
@keyframes love-right-up{
0%{
transform: translate(25rpx, 0);
opacity: 1;
}
50%{
transform: translate(50rpx, -63rpx);
opacity: 1;
}
100%{
transform: translate(25rpx, -126rpx);
opacity: 0.5;
}
}
以上代码在安卓机和模拟器上都是可以正常运行的,但是在IOS小程序真机上,只要加了opacity,动画就失效,直接不会出现改动画。
-
至过去的我
2044人对此回答表示赞同
我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多> -
黎明星晨
12人对此回答表示赞同
给个用例看下。点击态是默认用的,这块我们优化下
展开120回复分享发布于 6年前评论(0)
收起评论
-
Kenneth
3人对此回答表示赞同
案例就是问题中贴上的代码,cover-image是直接不见了。
展开30回复分享发布于 6年前评论(0)
收起评论
-
William
2人对此回答表示赞同
我这边同样遇到这个问题,cover-imageopacity直接图片不见了。并且不知道为什么cover-image的长按灰色态无法关闭。
展开20回复分享发布于 6年前评论(0)
收起评论