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

背景

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

比如下面的几种情况

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

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

如何实现

思路分析

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

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

相关推荐
moxiaoran57532 小时前
uni-app萌宠案例学习笔记--页面布局和CSS样式设置
前端·css·uni-app
CrissChan3 小时前
Pycharm 函数注释
java·前端·pycharm
小小小小宇3 小时前
Vue.nextTick()笔记
前端
小约翰仓鼠5 小时前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in5 小时前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴5 小时前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼5 小时前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计6 小时前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
啊~哈6 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js