css样式，箭头方向上下转换

最新推荐文章于 2024-05-28 15:41:28 发布

Lao乾妈官方认证唯一女友:D

最新推荐文章于 2024-05-28 15:41:28 发布

阅读量174

点赞数 3

分类专栏： react+typescript 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_24385297/article/details/138547125

版权

react+typescript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现效果：
点击切换箭头方向
在这里插入图片描述

在这里插入图片描述
代码实现：

import classNames from 'classnames' 
...
 const [dataVisible,setDataVisible]=useState(false)

<div className="date" onClick={()=>{setDataVisible(true)}}>
            <span className="text">
              2023 | 3月账单
            </span>
            <span className={classNames('arrow',dataVisible && 'expand')}></span>
          </div>
...

.arrow {
          display: inline-block;
          width: 7px;
          height: 7px;
          margin-top: -3px;
          margin-left: 9px;
          border-top: 2px solid #121826;
          border-left: 2px solid #121826;
          transform: rotate(225deg);
          transform-origin: center;
          transition: all 0.3s;
        }
        .arrow.expand {
          transform: translate(0, 2px) rotate(45deg);
        }