样式化组件 + React：CSS 过渡不断重置

Question

我有一个样式组件：

import styled, { keyframes } from 'styled-components';

const slideToCorner = keyframes`
  from {
    right: 0;
    top: 0;
  }

  to {
    right: 300px;
    top: 50px;
  }
`;

const SlideToCorner = styled.div`
  position: relative;
  right: 0;
  top: 0;
  ${props => props.slide && `animation: ${slideToCorner} 0.5s linear;`}
  transition: all 1s linear;
`;

export default SlideToCorner;

这是它的使用方式：

<SlideToCorner slide={matchingStatus === MATCHING_STATES.CONFIRMING}>
  <TargetBox>
    <LocalVideo />
  </TargetBox>
</SlideToCorner>

但是，当它进行动画处理时，它会在动画进行到一半时不断重置回其原始位置：

我可以确认不是 matchingStatus === MATCHING_STATES.CONFIRMING 引起的。

Answer 1

在

中添加forwards

animation: ${slideToCorner} 0.5s linear forwards

或使用animation-fill-mode: forwards

检查 animation-fill-mode 属性的不同行为

样式化组件 + React：CSS 过渡不断重置

Styled Components + React: CSS transition keeps resetting

css

reactjs

styled-components