展开收起的箭头动画应该怎么做?

背景

我们在日常开发中,一定经常遇到折叠面板的开发,为了美观,我们经常会添加展开收起按钮 ,并且带有箭头旋转动画

比如下面的几种情况

  • 文字点击变化,且有箭头旋转动画
  • 只有箭头动画

这几种情况的核心其实就是:点击箭头开始旋转,再点击箭头恢复初始位置。

如何实现

思路分析

要实现展开和收起箭头的旋转动画,我们可以使用 CSS 和 JavaScript。我们在点击按钮时,通过添加和移除 CSS 类,实现箭头的旋转动画。并且添加transition属性实现过渡效果。

代码实现

我们以第一种动画效果为例,先写基础代码

js 复制代码
<template>
  <div @click="open = !open">
      <span>{{ open ? '收起' : '展开' }}</span>
      <span>▼</span>
  </div>
</template>

<script>
const open = ref(false)
</script>

现在我们点击按钮,只有文字会变化,箭头不会旋转

我们给按钮加一个动态类

js 复制代码
<template>
  <div @click="open = !open">
      <span>{{ open ? '收起' : '展开' }}</span>
      <span :class="{ rotate: open }">▼</span>
  </div>
</template>

<script>
const open = ref(false)
</script>

<style scoped>   
   .rotate {
      transform: rotate(180deg);
      transition: transform 0.3s linear;
    }
</style>

可以看到,展开的时候有动画,但是收起的时候是没有过渡效果的。

我们只需要加一个transition属性即可

js 复制代码
<template>
  <div @click="open = !open">
      <span>{{ open ? '收起' : '展开' }}</span>
      <span :class="{ rotate: open }" class="arrow">▼</span>
  </div>
</template>

<script>
const open = ref(false)
</script>

<style scoped>
    .arrow {
      transition: transform 0.3s linear;
    }
   .rotate {
      transform: rotate(180deg);
      transition: transform 0.3s linear;
    }
</style>

现在样式就ok了

html版本

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arrow Rotation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <button id="toggleButton">
            <span id="arrow" class="arrow">▼</span>
        </button>
    </div>

    <script src="script.js"></script>
</body>
</html>

css

css 复制代码
/* styles.css */
.container {
    text-align: center;
    margin-top: 50px;
}

#toggleButton {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    outline: none;
}

.arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.arrow.rotate {
    transform: rotate(180deg);
}

js

js 复制代码
// script.js
document.getElementById('toggleButton').addEventListener('click', function() {
    const arrow = document.getElementById('arrow');
    arrow.classList.toggle('rotate');
});

这种方式可以实现箭头在点击时的旋转动画效果。在实际项目中使用,我们也可以根据具体需求调整样式和逻辑。

相关推荐
10年前端老司机42 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼8 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js