uni-ui icon indicating copy to clipboard operation
uni-ui copied to clipboard

uni-transition 偶尔无法完全隐藏

Open gexin1 opened this issue 4 years ago • 5 comments

如果show属性true=>false 切换过快

* @property {Boolean} show = [false|true] 控制组件显示或隐藏

会先执行

	close(type) {
			if (!this.animation) return
			this.tranfromInit(true)
				.step()
				.run(() => {
					console.log('closeFn')
					this.isShow = false
					this.animationData = null
					this.animation = null
					let { opacity, transform } = this.styleInit(false)
					this.opacity = opacity || 1
					this.transform = transform
					this.$emit('change', {
						detail: this.isShow
					})
				})
		},

// 然后执行open setTimeout里边 导致close方法无法正确执行

open() {
			clearTimeout(this.timer)
			this.transform = ''
			this.isShow = true
			let { opacity, transform } = this.styleInit(false)
			if (typeof opacity !== 'undefined') {
				this.opacity = opacity
			}
			this.transform = transform
			// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
			this.$nextTick(() => {
				console.log('open')
				// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
				this.timer = setTimeout(() => {
					this.animation = createAnimation(this.config, this)
					this.tranfromInit(false).step()
					this.animation.run()
					this.$emit('change', {
						detail: this.isShow
					})
				}, 20)
			})
		},

20211209100755

gexin1 avatar Dec 09 '21 02:12 gexin1

是否需要在执行close的时候 清楚setTimeout呢

gexin1 avatar Dec 09 '21 02:12 gexin1

在什么情况下?频率高吗 ?

mehaotian avatar Dec 13 '21 01:12 mehaotian

image image

gexin1 avatar Dec 13 '21 06:12 gexin1

我测试是在微信小程序环境 我执行close方法之前清除一下open里边的定时器 open方法里的this.animation 创建提前了一点

gexin1 avatar Dec 13 '21 07:12 gexin1

建议在 onReady 中执行 ,在onLoad 中 组件还没渲染完毕

mehaotian avatar Dec 16 '21 01:12 mehaotian

长时间未响应,问题暂时关闭; 若后续依然有问题,可reopen这个issue。

codexu avatar Sep 08 '22 10:09 codexu