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

背景

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

比如下面的几种情况

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

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

如何实现

思路分析

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

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

相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构