css - React-Emotion - 使用 EmotionJS 为 div 设置动画

Question

我需要一些帮助来为我的 div 设置动画。 我正在使用 Emotion-JS for React .

我认为动画效果不佳。 下面是我的组件。

谢谢

Answer 1

记住上面@Powell_v2回答的提示，没错!

但是对于您的情况，您甚至不需要使用动画和关键帧。只需使用 transition。

transition-duration: 10s;

过渡属性:宽度；

        <div
          className={css`
            position: absolute;
            left: 0;
            top: 10vh;
            width: ${this.state.open ? "80vw" : "10vw"};
            height: 8vh;
            background-color: black;
            z-index: 999;
            border-radius: 0px 10px 10px 0px;
            transition-duration: 10s;
            transition-property: width;
          `}
        />
    ```