如何让同步/刷新的图标（el-icon-refresh）旋转起来

_处女座程序员的日常

已于 2022-07-05 22:05:21 修改

阅读量1.6k

点赞数 1

分类专栏： vue Element UI 前端文章标签：前端 html css3

于 2022-07-05 22:00:00 首次发布

本文链接：https://blog.csdn.net/qq_42931285/article/details/125628991

版权

前端同时被 3 个专栏收录

348 篇文章 11 订阅

订阅专栏

vue

203 篇文章 4 订阅

订阅专栏

Element UI

57 篇文章 1 订阅

订阅专栏

使用场景：
同步数据时点一下icon希望它能够转起来

<i class="el-icon-refresh" 
style="font-size: 22px;
animation: rotating 2s linear infinite reverse;">
</i>

在这里插入图片描述
说明如下：
.animation-direction可以控制旋转方向：
reverse逆时针
nomal顺时针
alternate间歇更换（一会顺时针一会逆时针）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_处女座程序员的日常

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
如何让同步/刷新的图标（el-icon-refresh）旋转起来

同步的图标旋转
复制链接

扫一扫

专栏目录

element icon图标方向旋转

墨茶Official 愿你在二次元有吃不完的草莓饺子(ㄒoㄒ)

11-24

5443

icon图标方向旋转前言上代码效果前言任务如下： elementUi的icon图标如下：所以没有左上右上左下以及右下的图标，正思考要换图标时，同时一句话让我醍醐灌顶，他说你可以给图标方向旋转啊，比方说左旋转45度就成了左上，哇 666 上代码 <el-col :span="13"> <el-row> // 左上我们用左图标加旋转45度实现，然后使用id标签定位。 <el-col :span="5"><el-button

Bootstrap的Refresh Icon也spin起来

09-02

本文通过实例给大家介绍Bootstrap的Refresh Icon相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧

参与评论您还未登录，请先登录后发表或查看评论

Vue+ElementUI实现点击按钮刷新页面

莫绝岚的小屋

09-09

3729

js部分代码：刷新页面主要用到this.$router.go(0)或window.location.reload()vue中ElementUI刷新页面代码。

css3 实现icon刷新转动

最新发布

sdybz11zr的博客

04-29

398

30%时旋转到100度，50%时旋转到180度 ........ rotates是这个动画的名字。定义动画的关键帧的比如想初始状态过度到中间时结束时几个时间段不同的动画状态。: 旋转元素比如0deg到360deg 0度到360度。可以实现平移、旋转、缩放和倾斜等效果有以下几个属性。:缩放元素 x,y分别表示水平和垂直方向的缩放比例。:倾斜元素，分别表示水平和垂直方向的倾斜角度。让这个element组件的icon五角星转起来。简单写个例子吧就一个加载的状态。常见 0% 、50%、100%

【css】i标签icon图标旋转样式

王佑辉的博客

01-07

3059

【css】i标签icon图标旋转样式【css】i标签icon图标旋转样式【css】i标签icon图标旋转样式代码示例： <i class="el-icon-refresh" style="font-size: 22px; animation: rotating 2s linear infinite reverse;"> </i> 图片示例：注意： 1.el-icon-refresh是elementui图标样式 2.animation-direction可以控制旋转方向：

图标的旋转动画

zhang1099457817的专栏

12-06

594

private void openArrowAnimate(){ iv_arrow_down.animate().rotation(225).setDuration(380).setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator an

vue图标旋转

不靠谱的作曲家

12-30

2679

需求是当我们点击图标进行请求数据的时候，图标进行旋转，成功之后停止旋转，请求超时也会自动停止旋转 1.HTML <div class="refresh" icon="el-icon-refresh" @click="refresh()"> <img src="../assets/img/refresh.png" :class="[isRotate?'rotate':'rotat...

vue-pull-refresh-Vue.js 2.0的刷新刷新组件。-Vue.js开发

05-27

vue-pull-refresh vuejs 2.0针对移动设备实现的下拉刷新组件。演示演示PS：请使用支持Promise用法的浏览器安装vue-pull-refresh vuejs 2.0用于移动设备的下拉刷新组件实现。演示演示PS：请使用支持Promise用法的...

rmc-pull-updown-to-refresh:刷新ReactJS的组件

04-29

rmc-pull-updown-to-refresh An accessible and easy component for ReactJS简单易用的react拖拉翻页组件Installingnpmnpm i rmc-pull-updown-to-refresh -Syarnyarn add rmc-pull-updown-to-refreshBasic Example ...

react-native-smooth-pull-to-refresh:自定义拉动以刷新React Native的组件

05-02

React本机平滑拉动以刷新使用为React Native实现拉动刷新组件。该解决方案仅使用纯Js即可支持iOS和Android。安装安装套件$ npm install --save react-native-smooth-pull-to-refresh# or$ yarn add react-native-...

vue-awesome-pull-refresh:一个下拉刷新组件由vuejs实现。 https

05-15

Vue很棒的拉刷新一个下拉刷新组件是由vuejs 2.0实现的，用于移动设备。演示版PS：请使用支持Promise的浏览器用法安装npm install vue-awesome-pull-refresh --save普通JS var VuePullRefresh = require ( 'vue-...

vue 刷新icon小动效

liujiebahuang的博客

08-24

2924

点击icon图标，旋转一周。最先尝试的逻辑是，给一个控制参数refresh，初始false，icon绑定两个样式，类似以下： <i :class="[refresh? 'el-icon-refresh go' : 'el-icon-refresh']" @click="iconClick"></i>&emsp; el-icon-refresh是elementui自带图标 .go { transform: rotate(360deg); transition: al

vue实现icon刷新动画

weixin_48215380的博客

06-22

1832

点击icon图标，旋转360度实现刷新动画效果实现第二种实现Ant Design Vue刷新动画不管是elementUI和Ant Design Vue组件库，两者逻辑都是一样的，根据不同的css样式来进行旋转效果更多效果可以参考菜鸟教程...

Element-ui 导航表单重置与弹出层表单重置

zhouzhiwengang的专栏

02-10

501

场景: 使用el-form时，点击顶部导航表单的重置按钮实现导航表单重置效果。功能实现：第一步:首先给el-form添加ref属性。 <el-form :inline="true" ref="queryForm" class="demo-form-inline"> 第二步:在重置按钮绑定监听事件，实现表单重置。  <el-form :inline="true" ref="queryForm" class="demo-form

图片旋转放大

weixin_60921906的博客

09-27

367

console.log('%c [ 鼠标滑轮： ]-267', 'font-size:13px;console.log('%c [ on监听器事件触发了吗 ]-67', 'font-size:13px;// console.log('%c [鼠标up ]-307', 'font-size:13px;', '鼠标up');console.log('%c [ 图片移动了]-291', 'font-size:13px;// '%c [ on监听器事件触发了吗 ]-67',

ElementUI常见问题

m0_46689418的博客

06-01

2747

问题描述：提示：这里描述项目中遇到的问题：例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： <el-option class="addContact" disabled @click.native="onDrawer">新增联系人</el-option> 原因分析：提示：这里填写问题的分析：例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage

Vue Element UI 之实现点击按钮刷新 Echarts 图表

倚树探星的博客

03-21

8009

要实现这个功能，首先要求开发人员对 Vue 生命周期有清晰的了解和认识前言去官方文档看了看，文档中提到的是根据Options数据内容变化实时更新Echarts，并没有触发点击事件时才刷新的方法；去百度搜了一下，也没有此类的文章，多是和官方文档一样，设置定时器动态刷新 Echarts 关于触发某事件时更新 Echarts 数据，个人感觉难点在于 Echarts 图表数据的渲染要求 DOM 渲...

vue通过element-image组件实现旋转后保存图片

m0_65826745的博客

11-04

3025

vue图片旋转功能实现

el-image实现图片旋转并传给后端

q12as的博客

02-13

931

第一步，利用el-image的图片预览功能实现旋转。第三步，通过canvas将旋转之后的图片画出来。第二步，添加一个保存按钮，并添加点击事件。# 封装的canvas画图方法。# 封装的img组件。

请给以下代码的序号设置高为52px，宽为76px， <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px" > <el-form-item label="素材名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入素材名称" clearable size="small" @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small" > <el-option v-for="dict in statusOptions" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="创建时间"> <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" /> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button > <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button > </el-form-item> </el-form>

05-31

可以在样式中设置 `label-width` 属性以及每个表单元素的宽高。以下是给以上代码的序号设置高为52px，宽为76px的示例代码： ```html <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px" style="width: 100%; height: 52px;" > <el-form-item label="素材名称" prop="name" style="width: 76px;"> <el-input v-model="queryParams.name" placeholder="请输入素材名称" clearable size="small" @keyup.enter.native="handleQuery" style="width: 76px;" /> </el-form-item> <el-form-item label="状态" prop="status" style="width: 76px;"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small" style="width: 76px;" > <el-option v-for="dict in statusOptions" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="创建时间" style="width: 240px;"> <el-date-picker v-model="dateRange" size="small" style="width: 240px;" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" /> </el-form-item> <el-form-item style="width: 150px;"> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="width: 72px; height: 32px; margin-right: 10px;" > 搜索 </el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="width: 72px; height: 32px;" > 重置 </el-button> </el-form-item> </el-form> ``` 注意，以上代码中的样式设置只是示例，实际应用中需要根据具体需求进行调整。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交