我有一个样式组件:
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
。
答案 0 :(得分:2)
在
中添加forwards
animation: ${slideToCorner} 0.5s linear forwards
或使用animation-fill-mode: forwards
检查animation-fill-mode
属性是否有不同的行为