晒网
晒网
  • 发布:2024-09-16 01:03
  • 更新:2024-09-18 13:32
  • 阅读:97

【报Bug】settimeout setInterval冲突

分类:uni-app x

产品分类: uni-app x/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10 专业版

HBuilderX类型: 正式

HBuilderX版本号: 4.24

手机系统: Android

手机系统版本号: Android 13

手机厂商: 华为

手机机型: mate60

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

按钮2事件
goindenture() {
// 关闭B弹窗
this.closebottompupup()
// 打开C弹窗
setTimeout(() => {
let tempbottom = this.$refs['reftipsbottom'] as TipsBottomComponentPublicInstance
this.showicontype = 'success'
this.showtipposition = 'bottom'
this.showtipnotes = '我是提示内容'
tempbottom.showtips()
}, 300)
},

B页面的关闭动画代码(通过transition-property', 'top'属性实现关闭动画)
this.endmaskopacity = 0
this.openclosetransition(false, 0)
setTimeout(() => {
this.isshow = false
this.isalldone = false
}, 300)

C页面的打开动画代码(通过控制opacity的值用transition-property: opacity;实现)
this.opacityvalue = 1
clearInterval(this.closetiptime)
this.showtiptime = setInterval(() => {
this.opacityvalue = 0
clearInterval(this.showtiptime)
}, 3500)
this.showtiptimelatter = setInterval(() => {
this.isshowtip = false
clearInterval(this.showtiptimelatter)
}, 3800)

操作步骤:

如上代码 建俩自定义组件 然后放上对应代码就行

预期结果:

关闭B页时有动画关闭 打开C页时有动画打开效果

实际结果:

关闭B页面时有关闭动画 打开C时没有打开动画

bug描述:

使用settimeout 和setInterval 分别在两个自定义组件中添加动画效果 会有冲突 例如在A 页点击一个按钮1显示出来B页面 点击A页面上的另一个按钮2时 关闭B页面并打开C页面
其中B页面有3秒的关闭动画 C页面打开时有3秒的动画 所以点击按钮2时先关闭B页面 然后延迟3秒打开C页 结果是B页面有动画 C页面没有动画了 只有B页有关闭动画 注释关闭B页操作 仅保留C页的打开动画是有效果的

2024-09-16 01:03 负责人:无 分享
已邀请:
BFC

BFC

你好, 用hbuilderX创建一个demo项目,然后将demo工程用附件的形式上传吧 。 这样比较好排查

要回复问题请先登录注册