收藏
回答

Component中使用animation-delay的问题

一个通用的loading组件,该组件在多个page中引入,先展示loading,数据返回后隐藏,但在手机上每次animation-delay延迟的时间都和设置的不一样。


 测试机型:iPhone6s  系统:ios11.4


<view class='warp-box'>
  <view class='loading-box' wx:if="{{ showAnimate }}">
    <view></view>
    <view></view>
    <view></view>
  </view>
</view>
.warp-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}
.loading-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
}
.loading-box>view {
    width: 24rpx;
    height: 24rpx;
    background: #0ebd0c;
    display: inline-block;
    margin: 8rpx;
    border-radius: 50%;
    animation: ball-pulse-sync .6s infinite ease-in-out;
}
.loading-box>view:nth-of-type(1) {
    animation-delay: 0.2s;
}
.loading-box>view:nth-of-type(2) {
    animation-delay: 0.1s;
}
.loading-box>view:nth-of-type(3) {
    animation-delay: 0s;
}
@keyframes ball-pulse-sync {
    0% {
        transform: translateY(100%)
    }
    50% {
        transform: translateY(-100%)
    }
    100% {
        transform: translateY(100%)
    }
}


回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容