CSS3+HTML5+JS realizes the shrinking and expanding animation effect of a block
|
When I was working on a project recently, I found that I seldom used the animation technology in CSS3 in my project. Usually, the shrinking and expanding animation effects of some list blocks were almost always controlled by none and block of display , or hidden and visible of visibility . Therefore, in the recent project, I began to study the CSS3 animation technology in depth and applied it to the project. The following is the shrinking & expanding animation of the list block. A simple effect diagram
Implementation ideas Generally speaking, we divide the list block into a title block and a content block. (1) Title block: displays the title and an icon with shrinking & expanding animation effects ① For the icon part, we can use the pseudo-class to draw the arrow, and use the rotation property of transform to control the direction of the icon and its animation effect . ②Animation control, usually when you click the title, the list will shrink & expand, so when you click the title, you need to control the class. (2) Content block: The content block displays the content and carries the main animation effect - the shrinking and expanding of the list. ① Animation effect: For the animation of this block, our idea is to shrink the height of the entire block and hide the content to the left. Therefore, we need to control the height and hide the animation. So we use max-height for height control and transition (set animation time) and transform's attribute translate to hide the content. The complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.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;
}
/*Use pseudo-classes for icon painting*/
.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;
}
/*Use the acitve class to control the rotation of the icon and the bottom border of the title when expanding*/
.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
}
/*Hide the slider of the content block*/
.node_wrap::-webkit-scrollbar {
display: none;
}
/*Control the hiding of the content block. When hidden, the entire block is translated to the left by 200% of the width, and the maximum height is set to 0, otherwise the page will be left blank*/
.node_wrap_hide {
transform: translate(-200%, 0);
max-height: 0;
}
/*Control the display of content blocks. When displayed, the entire block is restored to the right, and the maximum height is set to 300px. The content inside will expand the block*/
.node_wrap_show {
transform: translate(0, 0);
max-height: 300px;
}
</style>
</head>
<body>
<div class="block_wrap">
<div id="block_wrap" class="title_item_wrap active">
<p class="chapter_title">Chapter Name</p>
</div>
<div id="list_wrap" class="node_wrap node_wrap_show">
<p>Section Name 1</p>
<p>Section Name 2</p>
<p>Section Name Three</p>
<p>Section name 4</p>
<p>Section Name Five</p>
<p>Section Name Six</p>
<p>Section Name 7</p>
<p>Section name eight</p>
<p>Section Name Nine</p>
<p>Section Name 10</p>
</div>
</div>
</body>
<script type="text/javascript">
// Get the title element var block_wrap = document.getElementById('block_wrap')
//Add a click event to the title element, and achieve animation effect by adding and removing control classes by clicking block_wrap.onclick = function() {
// Get the title element className collection let classArray = this.className.split(/\s+/)
// Get the content block element let list_wrap = document.getElementById('list_wrap')
// Determine whether the title element has the class active. If so, it means the list is expanded. Clicking it will hide the content block, otherwise it will display the content block if (classArray.includes('active')) {
//Hide content block 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 {
// Display content block block_wrap.classList.add('active')
list_wrap.classList.add('node_wrap_show')
list_wrap.classList.remove('node_wrap_hide')
return
}
}
</script>
</html>Copy the above code directly into the HTML file and save it to see the effect. This animation effect is suitable for mobile devices. There will be some flaws on the PC side, which can be slightly processed. This concludes this article about how to use CSS3+HTML5+JS to achieve the shrinking and expanding animation effect of a block. For more related html5 expansion and shrinking animation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Sample code for automatic web page refresh and automatic jump
>>: Introduction to HTML for front-end developers
Recommend
Solve the MySQL login 1045 problem under centos
Since the entire application needs to be deployed...
Pure CSS3 mind map style example
Mind Map He probably looks like this: Most of the...
Implementation of Docker container state conversion
A docker container state transition diagram Secon...
Embed player in web page embed element autostart false invalid
Recently, I encountered the need to embed a player...
Alibaba Cloud Server Domain Name Resolution Steps (Tutorial for Beginners)
For novices who have just started to build a webs...
How to obtain root permissions in a docker container
First, your container must be running You can vie...
How to use Vue3 asynchronous data loading component suspense
Table of contents Preface Creating Components Sum...
Detailed explanation of CSS3 animation and new features of HTML5
1. CSS3 animation ☺CSS3 animations are much easie...
Getting Started Guide to MySQL Sharding
Preface Relational databases are more likely to b...
A brief discussion on the lazy loading attribute pattern in JavaScript
Table of contents 1. Introduction 2. On-demand at...
Essential knowledge for web development interviews and written tests (must read)
The difference between inline elements and block-...
Detailed explanation of the use of Vue's new built-in components
Table of contents 1. Teleport 1.1 Introduction to...
MySQL 5.7.23 decompression version installation tutorial with pictures and text
It is too troublesome to find the installation tu...
A detailed account of the process of climbing a pit of Docker deployment service
First time writing. Allow me to introduce myself....
Three ways to forward linux ssh port
ssh is one of the two command line tools I use mo...