javascript动画操作
时间:2021-01-26
本文章向大家介绍javascript动画操作,主要包括javascript动画操作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
代码
代码如下(部分省略):
<template>
<a-menu
:default-selected-keys="['1']"
mode="inline"
theme="dark"
:inline-collapsed="collapsed"
style="height: 100%;display:flex;flex-direction:column"
id="domMenu"
@click="deliverAddress"
>
<a-menu-item class="rotate">
<div
style="background-color:#242A37;height:30px;width:100%;"
@click.stop="toggleCollapsed"
class="flex-c"
>
</div>
</a-menu-item>
</a-menu>
</template>
<script>
export default {
props: {
idDivProp: {
type: String,
default: () => {
return ''
},
},
distanceProp: {
type: Number,
default: () => {
return 10
},
},
},
data() {
return {
collapsed: true,
idDiv: this.idDivProp,
distance: this.distanceProp,
}
},
methods: {
// 动画设置
toggleCollapsed() {
let id = this.idDiv //要移动的div的id
let distance = this.distance //要移动的距离
this.collapsed = !this.collapsed //侧边栏收缩和展开
let angel = this.collapsed ? 90 : 0 //侧边栏图标赋值图标旋转角度
let size = this.collapsed ? 20 : 30 //侧边栏图标赋值图标大小
let width = this.collapsed ? 80 : 200 //侧边栏赋值宽度
let bgColor = this.collapsed ? '#2F3A48' : '#FFFFFF05' //退出按钮背景颜色
let domIcon = document.getElementById('iconChange')
let domMenu = document.getElementById('domMenu')
let domExit = document.getElementById('Exit')
domIcon.style.transform = 'rotate(' + angel + 'deg)' // 旋转角度
domIcon.style.transition = '0.5s' // 变化时间
domIcon.style.fontSize = size + 'px' // 字体大小变化
domMenu.style.width = width + 'px' // 宽度变化
domExit.style['background-color'] = bgColor // 颜色变化
this.shiftRightDiv(id, distance)
},
//当收缩展开时,右侧的div层也开始动画
shiftRightDiv(id, distance) {
if (id != '') {
let tmp = this.collapsed ? 0 : distance //右侧div移动距离
let shiftContainer = document.getElementById(id)
shiftContainer.style.transform = 'translate(' + tmp + 'px)'
shiftContainer.style.transition = '5s'
}
},
},
}
</script>
<style lang="scss" scoped>
// 样式覆盖
// 修改侧边栏的动画时长
.ant-menu {
transition-duration: 0.5s, 0.5s !important;
}
//重新设置icon的最小尺寸为0
.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
min-width: 0px;
}
::v-deep.ant-menu-inline-collapsed .ant-menu-item-group-title {
padding: 0px;
}
::v-deep .ant-menu-item-group-title {
padding: 0px;
}
</style>
此处的 a-menu
组件来自于 ant-design-vue
框架
最后
相关的文献地址如下:
vue过度动画的使用方法整理
vue动画&过渡整理
原文地址:https://www.cnblogs.com/GoodMemoryBlog/p/14332732.html
- nyoj-----42一笔画问题
- hdu-------1081To The Max
- nyoj------170网络的可靠性
- HDUOJ-------1052Tian Ji -- The Horse Racing(田忌赛马)
- 初学Java之Pattern与Matcher类
- 初学java之StringBuffer类的常用方法
- 初学java之大数处理
- hdu---1024Max Sum Plus Plus(动态规划)
- Go语言异步服务器框架原理和实现
- nyoj------布线问题(kruscal+求最小值)
- nyoj-----127星际之门(一)
- nyoj------20吝啬的国度
- HDUOJ-------2493Timer(数学 2008北京现场赛H题)
- go sync.Mutex 设计思想与演化过程 (一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【赵渝强老师】Docker的日志
- 超全递归技巧整理,这次一起拿下递归
- [译] React 测试驱动开发:从用户故事到产品
- 计算机基础之位运算 | 按位取反
- 关于php的ini文件相关操作函数浅析
- PHP中的输出缓冲控制
- SpringCloud微服务:基于Nacos组件,整合Dubbo框架
- [译] 使用 microbundle 打包 TypeScript 组件库
- 3分钟短文 | Laravel 获取模型查询生成的SQL语句
- 基于git的测试用例管理方案
- 【赵渝强老师】MongoDB管理用户的认证机制
- 使用Microsoft Teams Updater执行代码
- 腾讯云 Serverless 云函数实现 CKafka 数据转存到 ES
- 软硬件都开源!基于千兆以太网的温度传感应用
- 【赵渝强老师】使用Docker Compose进行服务编排