代码之家 › 专栏 › 技术社区 › Lucca

如何在关闭和打开此选择输入时应用旋转效果?

tailwind-css reactjs

Lucca · 技术社区 · 2 年前

我有一个向下箭头的图像,当布尔“打开”函数切换时,它会旋转到向上箭头,具有过渡效果。

<img src="./downArrow.png" className={`${(open) && "rotate-180 transition-all"}`} />

但当我试图关闭容器时,箭头会返回到其原始状态,而没有过渡效果。我已经尝试了几种不同的方法来将这种效果应用于(!open),但都不起作用。

我该怎么做?

1 回复 | 直到 2 年前

alexwbt 2 年前

在您的代码中 transition-all 当 open 是错误的。

要避免这种情况,请移动 全部转换 不符合条件:

<img src="./downArrow.png" className={`${open && "rotate-180"} transition-all`} />

这边 全部转换 始终存在于类字符串中,即使在 打开 是错误的。

推荐文章

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

IvonaK · 使用Vite和React在Tauri应用程序中集成shadcn/ui和Tailwind CSS v4

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

Unik6065 · 使用Vite在Laravel中覆盖默认顺风颜色的问题

1 年前

Reagan · 使用tailwind CLI在我的PHP项目中添加tailwind不会在frotand中显示样式。output.css为空或图标正确

1 年前

new221 · 应用顺风前缀时,画布上的preline ui不起作用

1 年前

Edward B. · 使用Tailwind Css制作一个包含子菜单的菜单,子菜单周围有连续的边框

1 年前

foO · 如何使用动态条件设置活动链接文本颜色

1 年前