vue实现点击箭头的旋转动画（收起展开）效果

温柔小生

已于 2024-03-20 11:34:59 修改

阅读量3.1k

点赞数 1

分类专栏： vue-cli 文章标签： vue.js 动画 javascript

于 2022-07-11 15:29:56 首次发布

本文链接：https://blog.csdn.net/qq_34953053/article/details/125722488

版权

vue-cli 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

本文介绍如何在Vue中通过动态绑定class实现箭头图片或图标在点击时进行旋转效果。通过设置data中的flag状态，结合CSS过渡效果，实现点击箭头图标时的180度旋转动画。此方法适用于前端开发中创建交互式的UI元素。

摘要由CSDN通过智能技术生成

实现方法：用vue动态绑定class的方法，实现用不同的class渲染箭头，达到点击箭头的旋转效果
模板的内容：

//这里是箭头图片
<img :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" src="arrow.png" alt="" @click="flag = !flag">
//或者：加一个点击事件就好了（下面这个是箭头图标）
<i :class="{ arrowRight: !flag3, arrowDown: flag3 }"class="el-icon-arrow-right downward"></i>

data的定义：

data(){
	return {
		flag : false,
	}
}

style的内容：

.arrowTransform{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(180deg);
  }
  .arrowTransformReturn{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(0deg);
  }