结合 js 点击事件和 css 动画实现箭头翻转

先构造出向下箭头的 html：

css 设置翻转动画：

.icon-arrow {
    width: 100px;
    height: 100px;
    /*设置所有动画的效果：0.3s 淡出效果*/
    transition: all .3s ease-out;
}
.icon-arrow-rotate {
    /*旋转180度*/
    transform: rotate(180deg);
}

js 点击事件，添加 / 移除旋转动画：

当 rotFlag 为 true 时，添加 icon-arrow-rotate 类；否则移除；

由于一开始的箭头不应该自动旋转，所以不添加 icon-arrow-rotate 类，因此 rotFlag 应初始化为 true。

每一次点击事件后反置 rotFlag，使得每一次的点击都能翻转。

let rotFlag = true;
let element = document.querySelector(".icon-arrow");
let rotateArrow = () => {
    if(rotFlag) {
        element.classList.add("icon-arrow-rotate");
    }else {
        element.classList.remove("icon-arrow-rotate");
    }
    rotFlag = !rotFlag;
};

在 icon-arrow 而不是 icon-arrow-rotate 中设置 transition 是因为：这里只在有 icon-arrow-rotate 的时候才设置翻转，如果移除 icon-arrow-rotate，会失去返回向下箭头的效果，在 icon-arrow 中设置可以防止这种情况出现。

点个赞鼓励一下~