Taro 在微信小程序中 onTransitionEnd 嵌套时存在不触发的问题

thigvfpy 于 4个月前发布在其他

关注(0)|答案(6)|浏览(43)

复现仓库

https://github.com/taroify/taro3314-ote
小程序基础库: 2.21.0
使用框架: React

复现步骤

Taro 在微信小程序中 onTransitionEnd 嵌套时存在不触发的问题

export default function Index() {
  const [offset, setOffset] = useState(20)
  return (
    <View className='index' onTransitionEnd={() => console.log("index ote")}>
      <View
        style={{
          transform: `translate3d(0, ${offset}px, 0)`,
          transition: "transform 100ms",
        }}
        onClick={() => {
          console.log("onClick offset")
          setOffset(offset === 20 ? 30 : 20)
        }}
        onTransitionEnd={() => console.log("ote")}
      >
        点击一下
      </View>
    </View>
  )
}

在 weapp 上的效果

在 h5 上的效果

期望结果

与 h5 的效果一致

实际结果

不与 h5 的效果一致

环境信息

� Taro v3.3.14

  Taro CLI 3.3.14 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.17.1 - C:\Programs\nodejs\node-v14.17.1-win-x64\node.EXE
      Yarn: 1.22.11 - C:\Programs\nodejs\node\yarn.CMD
      npm: 6.14.13 - C:\Programs\nodejs\node-v14.17.1-win-x64\npm.CMD

taro

来源：https://github.com/NervJS/taro/issues/10700

6条答案

按热度按时间

slsn1g291#

@tgioer 使用原生代码测试了一下， bindtransitionend 并不像文档说的一样可以冒泡：

Page({
  data: {
    offset: 20
  },
  handleParent () {
    console.log("index ote")
  },
  handleChild () {
    console.log("ote")
  },
  handleClick () {
    console.log("onClick offset")
    this.setData({
      offset: this.data.offset === 20 ? 30 : 20
    })
  }
})

<view bindtransitionend="handleParent">
  <view
    style="transform: translate3d(0, {{offset}}px, 0);transition: transform 100ms"
    bindtap="handleClick"
    bindtransitionend="handleChild"
  >
    点击一下
  </view>
</view>