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

使用伪元素更改css转换类

css-transitions reactjs css

klode · 技术社区 · 8 年前

我正在开发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 回复 | 直到 8 年前

Ted 8 年前

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

.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.

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

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

1 年前

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

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前