uni-app uni-transition 组件更新后在ios端动画执行完毕后元素位置会往左上偏移

uni-app uni-transition 组件更新后在ios端动画执行完毕后元素位置会往左上偏移

操作步骤：

  • uni-transition 组件更新后，在ios端动画执行完毕后，元素位置会往左上偏移。

预期结果：

  • uni-transition 组件更新后，在ios端动画执行完毕后，元素位置正常。

实际结果：

  • uni-transition 组件更新后，在ios端动画执行完毕后，元素位置会往左上偏移。

bug描述：

  • uni-transition 组件更新后，在ios端动画执行完毕后，元素位置会往左上偏移。

| 项目信息         | 详细信息     |
|------------------|--------------|
| 产品分类         | uniapp/App   |
| PC开发环境操作系统 | Windows      |
| PC开发环境操作系统版本号 | win11        |
| HBuilderX类型    | 正式         |
| HBuilderX版本号  | 4.65         |
| 手机系统         | iOS          |
| 手机系统版本号    | iOS 18       |
| 手机厂商         | 苹果         |
| 手机机型         | iphone13     |
| 页面类型         | nvue         |
| vue版本         | vue3         |
| 打包方式         | 云端         |
| 项目创建方式     | HBuilderX    |

更多关于uni-app uni-transition 组件更新后在ios端动画执行完毕后元素位置会往左上偏移的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

组件更新后是升级了 uni_modules 插件，还是内部状态更新了，HBuilderX 内置的 hello uniapp 有 extUI tab 页面可以复现你的问题吗

更多关于uni-app uni-transition 组件更新后在ios端动画执行完毕后元素位置会往左上偏移的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我的问题，之前一直用class设置的样式，也没什么异常，插件更新后一设置class就会出问题，现在看文档发现nvue是不支持通过class设置样式的，只能绑定styles传递样式。 问题解决了，谢谢大佬！

不过大佬还有个问题，就是uni-popup组件内部也用了uni-transition组件，更新到新版本后也出现了我提到的闪到左上角的问题，我在hello uniapp项目里，把extUI 里的popup页面改为nvue后，问题也都复现了，麻烦大佬后续跟进下！

回复 独酷设计: 说一下 HBuilderX 版本、运行的平台，vue 的版本，把这个页面改成 Nvue 是吧

回复 DCloud_UNI_OttoJi: 1. Hbuilder X 4.65；华为 Mate 30、HarmonyOS 4.2.0；vue3版本；2. 是的，我把hello-uniapp_3.4.7/pages/extUI/popup/popup.vue 改成了popup.nvue，结果就出现了。3. 我注意到社区里有另一个相似的问题，链接是 https://ask.dcloud.net.cn/question/209067。4.谢谢大佬跟进！

这是一个已知的iOS平台下uni-transition组件的兼容性问题。建议采取以下解决方案：

  1. 临时解决方案：在动画结束回调中手动重置元素位置
<uni-transition [@change](/user/change)="handleAnimationEnd">
// ...
methods: {
  handleAnimationEnd() {
    this.$nextTick(() => {
      // 手动重置元素位置
      this.$refs.transitionEl.style.transform = 'translate(0, 0)'
    })
  }
}
回到顶部