收藏
回答

CSS3动画在ios中失效?

安卓机都能正常播放,ios (测试的有 x,6s)不能播放。


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

2 个回答

  • 丶晓晓晓包
    丶晓晓晓包
    2019-08-20

    小程序中可以用这个了吗?

    @mixinblock($size, $bgc, $anime) {

      width: $size;

      height: $size;

      background-color: $bgc;

      animation: $anime5s linear;

      animation-fill-mode: forwards;

    }


    2019-08-20
    有用
    回复 1
    • 百河豚
      百河豚
      2019-08-20
      用的 mpvue
      2019-08-20
      回复
  • 卢霄霄
    卢霄霄
    2019-08-20

    什么动画呢?

    2019-08-20
    有用
    回复 9
    • 百河豚
      百河豚
      2019-08-20

      css3动画,部分代码:

      @mixin block($size, $bgc, $anime) {
        width: $size;
        height: $size;
        background-color: $bgc;
        animation: $anime 5s linear;
        animation-fill-mode: forwards;
      }
       
      .block {
        position: absolute;
        &.block-1 { @include block(94rpx, #616161, block1); }
        &.block-2 { @include block(52rpx, #202020, block2); }
        &.block-3 { @include block(90rpx, #2d2d2d, block3); }
        &.block-4 { @include block(78rpx, #1f1f1f, block4); }
        &.block-5 { @include block(110rpx,#151515, block5); }
        &.block-6 { @include block(94rpx, #2c2c2c, block6); }
      }
       
      @keyframes block1 {
        0% { transform: translate(28rpx, 50rpx); }
        60% { transform: translate(178rpx, 190rpx); }
        100% { transform: translate(228rpx, 114rpx); }
      }
      @keyframes block2 {
        0% { transform: translate(192rpx, 294rpx); }
        60% { transform: translate(-52rpx, 488rpx);}
        100% { transform: translate(88rpx, 378rpx); }
      }

      是 translate 无法用吗?有同事做的其他项目,动画没用到 translate ,ios 可以正常播放。

      2019-08-20
      回复
    • 卢霄霄
      卢霄霄
      2019-08-20回复百河豚
      能把编译后的代码做个代码片段吗?
      2019-08-20
      回复
    • A notorious liar
      A notorious liar
      2019-08-20回复百河豚
      你在玩呢???translate()你给了移动的位置没错。你要跟他说想哪里移动啊比如translate-X还是Y啊。不然它怎么移动
      2019-08-20
      回复
    • 百河豚
      百河豚
      2019-08-20
      .get-user-info .block.block-1.data-v-66df2f31 {
       
      width: 94rpx;
       
      height: 94rpx;
       
      background-color: #616161;
       
      animation: block1-data-v-66df2f31 5s linear;
       
      animation-fill-mode: forwards;
       
      }
       
      .get-user-info .block.block-2.data-v-66df2f31 {
       
      width: 52rpx;
       
      height: 52rpx;
       
      background-color: #202020;
       
      animation: block2-data-v-66df2f31 5s linear;
       
      animation-fill-mode: forwards;
       
      }
       
      @keyframes block1-data-v-66df2f31 {
       
      0% {
       
      transform: translate(28rpx, 50rpx);
       
      }
       
      60% {
       
      transform: translate(178rpx, 190rpx);
       
      }
       
      100% {
       
      transform: translate(228rpx, 114rpx);
       
      }
       
      }
       
      @keyframes block2-data-v-66df2f31 {
       
      0% {
       
      transform: translate(192rpx, 294rpx);
       
      }
       
      60% {
       
      transform: translate(-52rpx, 488rpx);
       
      }
       
      100% {
       
      transform: translate(88rpx, 378rpx);
       
      }
       
      }


      2019-08-20
      回复
    • 卢霄霄
      卢霄霄
      2019-08-20回复百河豚

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      这个代码片段哟。。

      2019-08-20
      回复
    查看更多(4)
登录 后发表内容
问题标签