Component中使用animation-delay的问题
发布于 6 年前 作者 tao44 11993 次浏览 来自 问答

一个通用的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](/user/keyframes) ball-pulse-sync {
    0% {
        transform: translateY(100%)
    }
    50% {
        transform: translateY(-100%)
    }
    100% {
        transform: translateY(100%)
    }
}


1 回复

你好，请提供一下出现问题的机型和微信版本，以及能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

回到顶部