收藏
回答

CSS3在滚动动画时,接入请求后的数据,切换了页面返回后才会开始滚动?

做一个循环滚动效果,但是接入请求后的数据,CSS的动画样式无法渲染,在点击其他页面,再返回后,就可以正常滚动了,目前模拟器没问题!

样式代码:

.real-timeData {

    height:auto;

    /* height: 500rpx; */

    positionrelative;

    displayflex;

    flex-directioncolumn;

    -webkit-animation20s rowup linear infinite normal;

    animation20s rowup linear infinite normal;

}

@-webkit-keyframes rowup{

    0% {

        -webkit-transformtranslateY(0);

    }

    100% {

        -webkit-transformtranslateY(-100%);

    }

}

@keyframes rowup {

    0% {

       transformtranslateY(0);

    }

    100% {

        transformtranslateY(-100%);

    }

}

因为数据高度不确定,所以设置高度样式为:

height:auto;

找到原因就是因为高度设置为auto,如果设置一个固定值就没问题,大佬们,有什么好的建议吗?也不知道是不是BUG


最后一次编辑于  11-19
回答关注问题邀请回答
收藏

4 个回答

  • 卢霄霄
    卢霄霄
    11-19

    倒腾个代码片段可以吗

    11-19
    赞同
    回复 2
    • catch
      catch
      11-19
      已经是复制了所有代码片段了,除了请求数据接口和wxml!功能就是循环滚动,通过css3实现的
      11-19
      回复
    • 卢霄霄
      卢霄霄
      11-19回复catch
      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      这个代码片段哦
      11-19
      回复
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    11-19

    min-height试试

    11-19
    赞同
    回复 1
    • catch
      catch
      11-19
      不行,没有用
      11-19
      回复
  • 一世倾心
    一世倾心
    11-19

    照你这么说的话,应该是以为初次渲染没有高度,而导致没有动画产生,可以使用小程序的动画方法,来实现

    11-19
    赞同
    回复 1
    • catch
      catch
      11-19
      小程序的动画API没有循环参数,虽然说官方最近提供了相关的回调函数,没有试过,因为我要做的是循环滚动效果,那么意味着只能通过计时器来弄,这样一来,很影响性能,时间一久就会卡顿、抖动,因此官方提供的API——https://developers.weixin.qq.com/miniprogram/dev/framework/view/animation.html大多数情况只适合一次性动画
      11-19
      回复
  • catch
    catch
    11-19

    真机上就是初次加载不会动,开发者工具倒是没问题,一定要设置高度就都没得问题

    11-19
    赞同
    回复
问题标签