Open dddlr opened 1 month ago
Example:
import { css, keyframes } from '@compiled/react'; import React, { lazy } from 'react'; const fadeIn = keyframes({ from: { opacity: "0" }, to: { opacity: "1" } }); const slideInLeft = keyframes({ from: { transform: "translateX(-100%)", opacity: "0" }, to: { transform: "translateX(0%)", opacity: "1" } }); const slideInRight = keyframes({ from: { transform: "translateX(0%)", opacity: "0" }, to: { transform: "translateX(100%)", opacity: "1" } }); const fadeInCss = css({ "opacity": "0", "animation": `0.4s ease-in ${fadeIn} 200ms forwards` }); const slideInLeftCss = css({ "opacity": "0", "animation": `0.5s ${slideInLeft} forwards` }); const slideInRightCss = css({ "opacity": "0", "animation": `0.5s ${slideInRight} forwards` }); const firstOpen = false; export const App = () => ( <> <div css={[firstOpen ? fadeInCss : slideInRightCss]}>hello world</div> </> );
Workaround: using logical operator instead of a ternary operator.
<div css={[firstOpen && fadeInCss, !firstOpen && slideInRightCss]}>hello world</div>
Related to https://github.com/atlassian-labs/compiled/issues/389 @dddlr ?
Example:
Workaround: using logical operator instead of a ternary operator.