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

背景

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

比如下面的几种情况

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

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

如何实现

思路分析

要实现展开和收起箭头的旋转动画,我们可以使用 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');
});

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

相关推荐
前端Hardy13 分钟前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy15 分钟前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙39 分钟前
替代 Object.freeze 的精准只读模式
前端·javascript
web前端1231 小时前
Java客户端开发指南 - 与Web开发对比分析
前端
龙在天1 小时前
前端 9大 设计模式
前端
搞个锤子哟1 小时前
网站页面放大缩小带来的问题
前端
hj5914_前端新手1 小时前
React 基础 - useState、useContext/createContext
前端·react.js
半花1 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
霍格沃兹_测试1 小时前
软件测试 | 测试开发 | H5页面多端兼容测试与监控
前端
toooooop81 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket