Transition组件show字段无法控制显隐

[Lin-Min]

这个 Issue 涉及以下平台:

• 微信小程序
• 支付宝小程序
• 百度小程序
• 头条小程序
• 快手小程序
• QQ 轻应用
• Web 平台（H5）

BUG 描述
Transition组件,show动态控制显隐,但是传值从true 变成false 会执行动画 但不会隐藏了,display 这个字段没有变为none。 如果直接设置为false 就会出现none.

复现步骤
异步延迟变更show的传入值，从true变为false就能复线。
期望结果
从true变为false，能正常隐藏
实际结果
执行了动画并没有隐藏
截图

环境
weapp:dev
附加信息

[Lin-Min]

[zuolung]

/* 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>
  )
}

[Lin-Min]

/* 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>
  )
}

没看懂啥意思？这不是官方例子吗？

[zuolung]

可以提供最小复现仓库吗？官方示例没有复现你说的情况

[Lin-Min]

可以提供最小复现仓库吗？官方示例没有复现你说的情况

`
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;`
这段代码就可以复现

[Lin-Min]

可以提供最小复现仓库吗？官方示例没有复现你说的情况

` 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关系逻辑是有问题的。

[zuolung]

/* 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>
  )
}

[Lin-Min]

/* 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>
  )
}

不是 你为什么又重复一次官网的案例？ 确定是在解决问题吗？

[zuolung]

duration={{ enter: 100, leave: 300 }}没有复现