React-Emotion - 使用 EmotionJS 为 div 制作动画

Question

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

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

谢谢

Answer 1

查看提供的示例后，应调整几件事：

推荐使用 @emotion/core 和 React (ref in docs)
css 函数不 return 计算的 class 名称字符串 - 样式应通过 css prop (ref in docs)
看来你弄错了@keyframes - read up on it on MDN 为了更好地理解。

希望对你有所帮助。

Answer 2

牢记上面@Powell_v2回答的提示，没错！

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

过渡持续时间：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;
          `}
        />
    ```

React-Emotion - 使用 EmotionJS 为 div 制作动画

React-Emotion - Animating a div with EmotionJS

css

emotion

reactjs