AntmJS
Transition组件show字段无法控制显隐
这个 Issue 涉及以下平台:
- [x] 微信小程序
- [ ] 支付宝小程序
- [ ] 百度小程序
- [ ] 头条小程序
- [ ] 快手小程序
- [ ] QQ 轻应用
- [ ] Web 平台（H5）
BUG 描述 Transition组件,show动态控制显隐,但是传值从true 变成false 会执行动画 但不会隐藏了,display 这个字段没有变为none。 如果直接设置为false 就会出现none.
复现步骤
异步延迟变更show的传入值，从true变为false就能复线。
期望结果
从true变为false，能正常隐藏
实际结果
执行了动画并没有隐藏
截图
环境 weapp:dev 附加信息
/* eslint-disable */
import react, { useEffect } from 'react'
import { View } from '@tarojs/components'
import { Cell, Transition } from '@antmjs/vantui'
const animations = [
'fade',
'fade-up',
'fade-down',
'fade-left',
'fade-right',
'slide-up',
'slide-down',
'slide-left',
'slide-right',
]
export default function Demo() {
const [show, setShow] = react.useState('fade-right')
useEffect(() => {
setTimeout(() => {
setShow('')
}, 4000)
}, [])
const animationAction = (ss) => {
setShow(ss)
setTimeout(() => {
setShow('')
}, 1000)
}
return (
<View>
{animations.map((item) => (
<Cell
title={item}
key={item}
onClick={() => animationAction(item)}
></Cell>
))}
{animations.map((item) => (
<Transition
duration={{ enter: 300, leave: 1000 }}
className="center-x"
enterClass="vanEnterClass"
enterActiveClass="vanEnterActiveClass"
leaveActiveClass="vanLeaveActiveClass"
leaveToClass="vanLeaveToClass"
key={`${item}tran`}
show={show === item}
name={item}
/>
))}
</View>
)
}
/* eslint-disable */ import react, { useEffect } from 'react' import { View } from '@tarojs/components' import { Cell, Transition } from '@antmjs/vantui' const animations = [ 'fade', 'fade-up', 'fade-down', 'fade-left', 'fade-right', 'slide-up', 'slide-down', 'slide-left', 'slide-right', ] export default function Demo() { const [show, setShow] = react.useState('fade-right') useEffect(() => { setTimeout(() => { setShow('') }, 4000) }, []) const animationAction = (ss) => { setShow(ss) setTimeout(() => { setShow('') }, 1000) } return ( <View> {animations.map((item) => ( <Cell title={item} key={item} onClick={() => animationAction(item)} ></Cell> ))} {animations.map((item) => ( <Transition duration={{ enter: 300, leave: 1000 }} className="center-x" enterClass="vanEnterClass" enterActiveClass="vanEnterActiveClass" leaveActiveClass="vanLeaveActiveClass" leaveToClass="vanLeaveToClass" key={`${item}tran`} show={show === item} name={item} /> ))} </View> ) }
没看懂啥意思？这不是官方例子吗？
可以提供最小复现仓库吗？官方示例没有复现你说的情况
` import { FC, useEffect,useState } from 'react'; import { View, Text } from '@tarojs/components'; import { Transition } from '@antmjs/vantui'; const BaseInfo: React.FC<IAppProps> = props => { const [show, setShow] = useState(true);
useEffect(() => { /** 假设请求300msfetch数据回来进行判断 */ setTimeout(() => { setShow(false); }, 300); }, []);
console.log('show===', show);
return ( <Transition show={show} name="slide-up" duration={{ enter: 300, leave: 500 }}> <View> <Text>测试动画</Text> </View> </Transition> ); };
export default BaseInfo;` 这段代码就可以复现
可以提供最小复现仓库吗？官方示例没有复现你说的情况
` import { FC, useEffect,useState } from 'react'; import { View, Text } from '@tarojs/components'; import { Transition } from '@antmjs/vantui'; const BaseInfo: React.FC = props => { const [show, setShow] = useState(true);
useEffect(() => { /** 假设请求300msfetch数据回来进行判断 */ setTimeout(() => { setShow(false); }, 300); }, []);
console.log('show===', show);
return ( <Transition show={show} name="slide-up" duration={{ enter: 300, leave: 500 }}> 测试动画 ); };
export default BaseInfo;` 这段代码就可以复现
测试发现跟这个组件传递的duration有关系，如果延迟时间大于300ms组件能正常，如果小于等于300也就是enter的时间，就无法正常。我觉得组件的duration和show关系逻辑是有问题的。
/* eslint-disable */
import react, { useEffect } from 'react'
import { View } from '@tarojs/components'
import { Cell, Transition } from '@antmjs/vantui'
const animations = [
'fade',
'fade-up',
'fade-down',
'fade-left',
'fade-right',
'slide-up',
'slide-down',
'slide-left',
'slide-right',
]
export default function Demo() {
const [show, setShow] = react.useState('fade-right')
useEffect(() => {
setTimeout(() => {
setShow('')
}, 4000)
}, [])
const animationAction = (ss) => {
setShow(ss)
setTimeout(() => {
setShow('')
}, 1000)
}
return (
<View>
{animations.map((item) => (
<Cell
title={item}
key={item}
onClick={() => animationAction(item)}
></Cell>
))}
{animations.map((item) => (
<Transition
duration={{ enter: 100, leave: 300 }}
className="center-x"
enterClass="vanEnterClass"
enterActiveClass="vanEnterActiveClass"
leaveActiveClass="vanLeaveActiveClass"
leaveToClass="vanLeaveToClass"
key={`${item}tran`}
show={show === item}
name={item}
/>
))}
</View>
)
}
/* eslint-disable */ import react, { useEffect } from 'react' import { View } from '@tarojs/components' import { Cell, Transition } from '@antmjs/vantui' const animations = [ 'fade', 'fade-up', 'fade-down', 'fade-left', 'fade-right', 'slide-up', 'slide-down', 'slide-left', 'slide-right', ] export default function Demo() { const [show, setShow] = react.useState('fade-right') useEffect(() => { setTimeout(() => { setShow('') }, 4000) }, []) const animationAction = (ss) => { setShow(ss) setTimeout(() => { setShow('') }, 1000) } return ( <View> {animations.map((item) => ( <Cell title={item} key={item} onClick={() => animationAction(item)} ></Cell> ))} {animations.map((item) => ( <Transition duration={{ enter: 100, leave: 300 }} className="center-x" enterClass="vanEnterClass" enterActiveClass="vanEnterActiveClass" leaveActiveClass="vanLeaveActiveClass" leaveToClass="vanLeaveToClass" key={`${item}tran`} show={show === item} name={item} /> ))} </View> ) }
不是 你为什么又重复一次官网的案例？ 确定是在解决问题吗？