我有一个样式组件:
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
导致它的原因。