我正在尝试构建一个 React 组件来处理淡入和淡出。在下面的代码中,如果我out
作为道具传递给组件,它会在动画出来之前显示为隐藏。我试图让它默认淡入,然后在我传入out
道具时淡出。有人看到这个问题的解决方案吗?
import React from 'react';
import styled, { keyframes } from 'styled-components';
const fadeIn = keyframes`
from {
transform: scale(.25);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
`;
const fadeOut = keyframes`
from {
transform: scale(1);
opacity: 0;
}
to {
transform: scale(.25);
opacity: 1;
}
`;
const Fade = styled.div`
${props => props.out ?
`display: none;`
: `display: inline-block;`
}
animation: ${props => props.out ? fadeOut : fadeIn} 1s linear infinite;
`;
function App() {
return (
<div>
<Fade><test></Fade>
</div>
);
}
export default App;