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

使用伪元素更改css转换类

css-transitions reactjs css

klode · 技术社区 · 6 年前

我正在开发React应用程序。

我使用了两个带有after伪元素的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转换来设置更改的动画?

CodePen

1 回复 | 直到 6 年前

Ted 6 年前

是的,但不像你做的那样。尝试以下操作:

.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' : ''}`} />

这样做的目的是旋转原始图标,而不是将其更改为新图标(无法使用字体设置动画)。

See it working in this demo.

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前