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

背景

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

比如下面的几种情况

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

• 只有箭头动画

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

如何实现

思路分析

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

代码实现

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

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

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

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

我们给按钮加一个动态类

<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属性即可

<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

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

/* 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

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

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