首页 > 其他分享 >vue实现icon刷新动画

vue实现icon刷新动画

时间:2023-07-20 09:23:03浏览次数:28  
标签:动画 vue refresh flag refreshClick 刷新 icon

实现点击icon图标,旋转一周

 

通过ElementUI实现刷新动画

<i :class="[refresh_flag? 'el-icon-refresh refreshIcon' : 'el-icon-refresh']" @click="refreshClick"></i>

refreshClick点击时refresh_flag状态为true,接口数据返回成功后再变为false

 

.refreshIcon {
  transform: rotate(360deg);
  transition: all 1s;
}

refresh_flag状态为true,使icon旋转一周

 

data{
    return {
        refresh_flag: false
    }
},
methods:{
    refreshClick(){
        this.refresh_flag = !this.refresh_flag;

        // 执行代码逻辑
        ......

        setTimeout(() => {
            this.refresh_flag = !this.refresh_flag;
        },1000)
    }
}

 

标签:动画,vue,refresh,flag,refreshClick,刷新,icon
From: https://www.cnblogs.com/zj68/p/17567395.html

相关文章

  • vue--day31---组件的嵌套
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>组件的嵌套</title><scripttyp......
  • Vue 3起手式:createApp 函数
    Vue3真有意思。用Vue3做了几个简单的Web页面了,本文展示其createApp函数的一些使用。 createApp函数官文:https://cn.vuejs.org/api/application.htmlfunctioncreateApp(rootComponent:Component,rootProps?:object):App第一个参数是根组件。第二个参数......
  • vue基本操作[2] 续更----让世界感知你的存在
    Vue文件解析什么是<template/>标签template是html5新元素,主要用于保存客户端中的内容,表现为浏览器解析该内容但不渲染出来,可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。关于单文件组件vue的单文件相当于一个页面中的组件,包含了关于该组件的html-css-js文......
  • vue项目安装lees-loader报错:Module build failed: Error: Cannot find module 'less'
    1-新搭建的一个项目,运行时报Modulebuildfailed:Error:Cannotfindmodule'less'错误原因:vue文件里面的style添加了 lang="less" 解决方案:安装less  npminstallless2-安装less后运行报错:Modulebuildfailed:TypeError:this.getOptionsisnotafunc......
  • 使用vuex实现任意组件间通信
    title:使用vuex实现任意组件间通信date:2023-07-1915:51:54tags:-vuecategories:-工程-前端top:使用vuex实现任意组件间通信学习vue的第五天,学到了用插件vuex来实现vue任意组件之间的通信。以下是个人理解,如有错误请指正。vuex描述Vuex是一个专为Vue.js应......
  • vue+element-ui 点击表格某一行,展开内容
    正常情况下,表格中想要展开某一行只能通过点击最前面的小箭头,如果想要实现点击某一行后直接展开,那么首先,就要先了解这几个属性:row-key的值只能是表格中某一列的key,而expand-row-keys数组里保存的则是所有展开行的row-key值,假如设置row-key=“id”,那么expand-row-keys数组......
  • android 动画菜单
    Android动画菜单在Android开发中,动画是提高用户体验以及增强应用吸引力的重要部分之一。动画菜单是一种常见的交互设计,在用户点击一个按钮或者触摸屏幕时,菜单项以动画的形式呈现出来。本文将介绍如何使用Android的动画功能来实现一个动画菜单。1.基本概念在Android中,动画可以......
  • 14款超时尚的HTML5时钟动画
    时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画。今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟、3D时钟、个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助。1、可爱的CSS3圆盘时钟......
  • ant design vue描述列表设置列宽
    这是默认的样子,没有数据时会显得label特别宽设置列宽为200px后如图所示方式如下自定义style.label.ant-descriptions-item-label{width:200px;}给descriptions应用样式<a-descriptionsid="jbxx"class="label"title="基本信息"bordered><a-descripti......
  • vue3,ts,vite4,uniapp设置路径别名
    安装依赖npminstall--save-dev@types/node配置vite.config.ts文件//vite.config.tsimport{defineConfig}from'vite';import{resolve}from'path';exportdefaultdefineConfig({resolve:{alias:{'/@/':resolve(......