带有伪元素的 CSS 转换更改类

Question

我正在开发一个 React 应用程序。

我正在使用两个带有伪元素之后的 css 类来添加右三角形和下三角形

   .triangle-right::after {
        content: "25B6";
        font-size: 10px;
    }
    .triangle-down::after {
        content: "25BC";
        font-size: 10px;
    }

我从两个三角形过渡，改变元素的类。

<span className={(this.state.isOpen ? 'triangle-down' : 'triangle-right')}></span>

是否可以使用 css 过渡来动画更改？

代码笔

Answer 1

是的，但不像你已经做到了。试试这个：

.triangle-right:after {
    content: "25B6";
    display: inline-block;
    font-size: 10px;
    transition: transform 200ms;
}
.triangle-right.is-open:after {
    transform: rotate(90deg);
}

和这个html

<span className={`triangle-right${this.state.isOpen ? ' is-open' : ''}`} />

这样做是旋转原始图标，而不是将其更改为新图标(无法使用字体进行动画处理(。

在此演示中看到它的工作原理。