京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hidden 和 visible来进行控制。因此,在最近的项目中,就开始深入研究CSS3关于动画的技术,并且运用到了项目中,下面是关于列表块的收缩&展开动画。
简单的一个效果图
实现思路
大体上我们将列表块分割成 标题块 和 内容块
(1)标题块:展示标题和一个带有收缩&展开动画效果的图标
①图标部分,我们可以使用伪类来绘画出箭头,并且使用 transform 的旋转属性 rotate进行图标的方向控制和其动画效果。
②动画控制,通常点击标题部分,列表则收缩&展开,因此点击标题时,要对class进行控制。
(2)内容块:内容块展示内容,且该块承载了主要的动画效果——列表的收缩&展开
①动画效果:该块的动画,我们的思路是整个块的高度收起来,里面的内容也向左边隐藏,因此需要控制高度和动画的隐藏,所以使用 max-height 进行高度控制和 transition(设置动画时间)、transform 的属性 translate来进行内容的隐藏
完整代码如下:
.block_wrap {
width: 500px;
margin: 0 auto;
border: 1px solid #e3e3e3;
border-radius: 10px;
}
.chapter_wrap {
background: white;
text-align: left;
border-radius: 8px;
color: #333333;
margin-bottom: 15px;
font-size: 14px;
overflow: hidden;
}
.title_item_wrap {
padding: 10px 10px 10px 0;
margin: 0 10px 0 10px;
border-bottom: none;
display: flex;
align-items: center;
}
/*使用伪类进行图标绘画*/
.title_item_wrap::after {
content: '';
width: 10px;
height: 10px;
border-top: 2px solid #999999;
border-right: 2px solid #999999;
transform: rotate(-45deg);
display: inline-block;
transition: 0.3s;
float: right;
margin-top: 10px;
}
/*使用类acitve类控制图标的旋转和展开时标题的下边界*/
.active {
border-bottom: 1px solid #F0F0F0;
}
.active::after{
transform: rotate(135deg);
margin-top: 5px;
}
.chapter_title {
font-size: 16px;
padding: 0;
margin: 0;
width: calc(100% - 30px);
}
.node_wrap {
overflow: hidden;
overflow-y: scroll;
transition: 0.3s;
}
.node_wrap p {
padding: 0 20px 5px 20px;
margin: 10px 0;
border-bottom: 1px solid #e3e3e3
}
/*隐藏内容块的滑动条*/
.node_wrap::-webkit-scrollbar {
display: none;
}
/*控制内容块隐藏 隐藏时,整块向左边平移200%的宽度,并且将最大高度设置为0,否则页面会留有空白*/
.node_wrap_hide {
transform: translate(-200%, 0);
max-height: 0;
}
/*控制内容块显示,显示时,整块向右边复原,并且将最大高度设置为300px,里面的内容即会将块撑开*/
.node_wrap_show {
transform: translate(0, 0);
max-height: 300px;
}
章节名称
节名称一
节名称二
节名称三
节名称四
节名称五
节名称六
节名称七
节名称八
节名称九
节名称十
// 获取标题元素
var block_wrap = document.getElementById('block_wrap')
//给标题元素添加点击事件,通过点击控制class的添加&去除达成动画效果
block_wrap.onclick = function() {
// 获取标题元素className集合
let classArray = this.className.split(/\s+/)
// 获取内容块元素
let list_wrap = document.getElementById('list_wrap')
// 判断标题元素是否有类active,如若存在,则说明列表展开,这时点击则是隐藏内容块,否则显示内容块
if (classArray.includes('active')) {
// 隐藏内容块
block_wrap.classList.remove('active')
list_wrap.classList.remove('node_wrap_show')
list_wrap.classList.add('node_wrap_hide')
console.log(this.className.split(/\s+/))
return
} else {
// 显示内容块
block_wrap.classList.add('active')
list_wrap.classList.add('node_wrap_show')
list_wrap.classList.remove('node_wrap_hide')
return
}
}
以上代码直接复制到HTML文件保存后即可看到效果。此动画效果适应移动端,PC端会有点瑕疵,稍微处理即可。
到此这篇关于CSS3+HTML5+JS 实现一个块的收缩与展开动画效果的文章就介绍到这了,更多相关html5展开收缩动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果相关推荐
- 京东css3动画全屏海报_CSS3动画演示,效果惊到爆
或许你已经看过很多关于CSS3动画的技术,包括前端观察之前发表的一些,那么现在就情看一看CSS3动画的魅力吧.这里是一辑47个令人瞠目结舌的CSS3动画演示.他们演示了CSS3能给我们带来的巨大的可能 ...
- html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- 京东css3动画全屏海报_京东全屏CSS3动态海报抖动效果代码生成,海报上透明图片自动上下抖动带动感...
京东全屏CSS3动态海报抖动效果代码生成,海报上透明图片自动上下抖动带动感 分享到: 作者:陈俊 日期:2018-1-10 15:54 人气:4482 分类:装修助手教程 重要提示:生成 ...
- 京东css3动画全屏海报_京东超市的文案,写到吃货心坎里了
京东超市最近为吃货嘉年华发布了一支「吃货有担当,食力要肩扛!」的主题广告片,再次用可可爱爱的定格动画萌化吃货们的心. 短片文案以「肩扛 ,不如肩扛 」的句式将不同的食品带入不同的生活场景,给产品注入不 ...
- 京东css3动画全屏海报_京东店铺装修安装全屏CSS3动态缩放效果海报,活动海报上添加透明素材自动缩放 ......
京东装修动态海报模块的方法,京东店铺上怎么实现CSS3动态海报带缩放的效果?JD海报上添加透明元素图片自动缩放,缩放速度及参数可以自己自定义调整~下面疯狂的美工京东装修助手在线版功能区有此功能,一键生 ...
- 京东css3动画全屏海报_京东装修实现全屏CSS3活动海报上下左右抖动动态代码效果,png透明图自动带类似GIF特效 ......
京东JD店铺装修时想做一个海报上带动态效果怎么做,不做GIF动态图,以代码形式实现CSS3自动上下或左右抖动特效,疯狂的美工小编给大家带来代码生成工具及使用方法,让美工不需要做GIF动态图也能实现动态 ...
- 京东css3动画全屏海报_30个免费的CSS3动画片段代码
30个免费的CSS3动画片段代码 Sponsor 对于网页设计师来说,前端代码CSS/HTML不是强项,但有时候也是需要写的.特别是现在流行CSS3动画,学习和了解一些相关知识是必须的. CSS3动画 ...
- Codrops 优秀教程:基于 CSS3 的全屏网页过渡特效
向大家分享一个来自 Codrops 的基于 CSS3 实现的全屏网页过渡特效.页面初始布局是四个盒子,点击其中一个会扩张到全屏,其它的会淡出隐藏:关闭当前视图的时候又恢复到初始状态. 您可能感兴趣的相 ...
- 下载 电子商城类型htm模板_唯美风美妆春季补水面霜全屏海报psd模板psd素材
分类:全屏海报 类目:美妆个护 格式:psd 体积: 尺寸:1920*546 编号:13044625 软件: Photoshop CS6(.psd) 颜色模式 : RGB 图像类型:位图 版权:独家版 ...
最新文章
- 回归——同步更新github.io
- python创建变量revenue_Python数据分析:小红书销售额预测
- android黑色半透明dialog背景,Android开发中Dialog半透明背景消失
- java编程东西好多记不住_课程总结
- mysql复杂查询示例_找到时间和内存复杂性之间的平衡-一个示例
- mysql8.0.19解压版_MySQL8.0解压版配置步骤及具体流程
- 枚举如何设置空白_2019-07-04 用VBA设置word中shape对象相对位置
- 安卓快速排序与冒泡排序
- cookie token 了解一下
- Java 提取PDF文档中的图片
- python极速入门(适合有基础)
- Linux系统下安装redis
- 用c语言实现窗口化,c怎么窗口化只能开挂吗
- Spring中如何操作JDBC
- 家电售后APP软件开发作用特点
- 2019年科协宣传部第一次培训
- BICC呼叫建立过程
- 集成学习之 如何进行多样性增强
- 怎么测ASEMI整流桥KBPC3510W电压,KBPC3510W怎么判别好坏
- Lacrimosa全集纳米盘下载(22CD1DVD)[APE]
热门文章
- 蚂蚁金服上市,给出了一个底层逻辑
- VBA,如何使用类msgbox的效果,但是让窗口过几秒自动关闭? (未完成)
- Java基于springboot+vue的房屋出租租房系统 前后端分离
- 安卓开发Android studio学习笔记12:读取解析XML(案例演示)
- 2023计算机毕业设计SSM最新选题之java光明小区物业管理系统wjomh
- 一入盲盒深似海——小小盲盒,尽榨干了多少人的钱包?
- 【Qt开源项目推荐】完美的Dock窗口布局解决方案 Qt-Advanced-Docking-System
- C语言strstr函数
- 大数据知识点归纳总结
- python图像代码怎么变成图像_如何让一张图片变成二值图像?python+opencv图像处理...