Question

我有一个问题，可以在post-css中设置动态变量或从JS更改变量吗？我有反应组件和内部css3动画，我想为每个组件单独设置动画延迟。

我找到了类似的解决方案，我可以传递属性并从css中读取它，例如JS代码：

<div className={style.component} delay={5}>

我可以在CSS中阅读它，但仅限于if语句：

&[delay="5"] {
 animation: show 0.1s linear forwards 5s;

}

它有效！但我想要这样的东西：

animation: show 0.1s linear forwards [delay]s; //dynamic delay value here

有可能吗？干杯

Answer 1

只需将动态值＆＃39; 5＆＃39; 作为这样的道具传递：

const App = (props) => {

      return (

        <div className={style.component} style={{animation: "show 0.1s linear forwards " + (props.delayStyle + 's')}}>
            // Div Content Here
        </div>

      )

};

ReactDOM.render(<App delayStyle='5' />, document.getElementById('someDiv'));

CodePen： enable it with a PRAGMA directive

来自javascript的post-css动态变量

1 个答案: