vue实现点击图标,图标在2s中完成旋转
Vue 实现 完成 点击 旋转 图标
2023-09-27 14:22:20 时间
<!-- 点击 vue实现点击图标,图标在2s中完成旋转
1==》如何让它在2s内完成旋转 使用动画 transform: rotate(-180deg); 动画的运动状态
transition: all 2s; 动画运动时间
2--》点击的时候就添加效果,用三目结算结合v-bind, 变量不加引号 类名添加
3==》不要删除aa,因为当你再次点击的时候,aa类会在2s类变成原来的状态仍然有动画
原地址==》https://segmentfault.com/q/1010000012328749/a-1020000012329601
<title></title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<!-- 引入Vue -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
.aa {
transition: all 2s;
}
.go {
transform: rotate(-180deg);
transition: all 2s;
}
</style>
</head>
<body>
<div id="app">
<div>
<i :class="[rotate? 'el-icon-arrow-left go' : ' el-icon-arrow-left aa' ]" @click="start"></i>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data() {
return {
rotate: false
}
},
methods: {
start() {
this.rotate = !this.rotate;
console.log(this.rotate)
}
}
})
</script>
相关文章
- 使用 Vue.js 和 Semantic-UI 做一个简单的愿望清单
- vue的自定义组件如何使用prop传值?
- 精品微信小程序ssm培训机构管理系统+后台管理系统|前后分离VUE
- 基于SSM+SpringBoot+VUE实现的电影院会员积分管理系统
- 「经典题」Vue获取DOM的几种方法?
- vue中的slot与slot-scope
- Java 之SpringBoot+Vue实现后台管理系统的开发
- Vue函数式组件 简单实现
- 前端路由简介以及vue-router实现原理
- vue+element ui项目总结点(三)富文本编辑器 vue-wangeditor
- vue学习(十一)组件全攻略
- StringBoot+Vue实现游客或用户未登录系统前、可以浏览商品等信息、但是不能购买商品或者加入购物车等操作。登录系统显示用户的登录名(源码+讲解)
- 场景类:vue多个router-view路由嵌套
- 前端vue路由模块拆分归类【理解版】
- 前端vue实现登录前,记住密码功能案例【存储cookies与base64加密版】
- JavaScript Vue 获取文件md5值
- vue里利用multi-items-input组件实现QQ邮箱收件人输入框功能?
- 从实现讲解vue的原理
- Vue中如何定义全局函数
- Vue 2.0 制作列表组件,实现分页、搜索、批量操作等