如何再次触发具有样式组件的关键帧动画？

Question

我有一个非常基本的动画：当内容更改时，组件的不透明度从0变为1。 但是，这需要两个不同的关键帧动画。 如何简化这段代码？

 import React from "react"; import styled, { keyframes, css } from "styled-components" const enter = keyframes` from {opacity: 0;} to {opacity: 1;} `; const update = keyframes` from {opacity: 0;} to {opacity: 1;} `; const Test = styled.div` animation: ${({toggle})=> toggle ? css ` ${update} 0.7s linear forwards` : css `${enter} 0.7s linear forwards`}; ` export default function App() { const [toggle, setToggle] = React.useState(false) return ( <> <button onClick={()=> setToggle(!toggle)}>toggle animation</button> <Test toggle={toggle}>{toggle ? "off" : "on"}</Test> </> ); }

这也是一个沙箱：https ://codesandbox.io/s/charming-joliot-nxxof? file=/ src/App.js

同样，理想的是具有良好的淡入淡出过渡。 在此内容突然消失，然后让下一个内容顺利显示。