收藏
回答

picker-view 组件与 css 循环动画的显示冲突问题?

截图:

详细描述:当 picker-view 处于初始状态 A,长按(不松手)选择状态 B ,且当页面内有循环动画时,在动画的每次的 animationiteration 和 animationend 事件触发时,picker-view 会自动重置到初始状态 A。

组件名称: picker-view 和 picker-column

基础库版本号:2.16.0 及以上

代码描述:

wxss:

.test-rotate {
  width: 30px;
  height: 30px;
  animation: rotation 2s linear infinite !important;
  margin-top: 200px;
}


@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }


  25% {
    transform: rotate(90deg);
  }


  50% {
    transform: rotate(180deg);
  }


  75% {
    transform: rotate(270deg);
  }


  100% {
    transform: rotate(360deg);
  }
}


js:

Page({
  animationend() {
    console.log("animationend");
  },
  animationstart() {
    console.log("animationstart");
  },
  animationiteration() {
    console.log("animationiteration");
  },
});



wxml:

<!-- index.wxml -->
<picker-view style="height: 200px">
  <picker-view-column>
    <view>A</view>
    <view>B</view>
    <view>C</view>
  </picker-view-column>
</picker-view>
<View class='test-rotate' bind:animationend="animationend" bind:animationstart="animationstart" bind:animationiteration="animationiteration">
  rotate
</View>



最后一次编辑于  2023-08-07
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容