📅 最后修改于: 2023-12-03 15:14:42.744000 🧑 作者: Mango
Have you ever wanted to make an element disappear from your page in a smooth animated way? In this tutorial, we will look at how to create a simple div disappear animation using Javascript.
In order to follow this tutorial, you will need a basic understanding of HTML, CSS, and Javascript. You will also need a code editor such as VS Code, Sublime, or Atom.
First, let's create a basic HTML page with a div element. We will also include a button that we will use to trigger the disappearance of the div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Div Disappear Animation</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#box {
width: 200px;
height: 200px;
background-color: #3498db;
margin: 50px auto;
transition: all 0.5s ease;
}
#button {
background-color: #2ecc71;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Div Disappear Animation</h1>
<div id="box"></div>
<button id="button">Disappear</button>
<script>
// Javascript code to make the div disappear
</script>
</body>
</html>
In the CSS, we have defined a div with an id of "box". This is the element that we want to make disappear. We have also defined a button with an id of "button", which we will use to trigger the animation.
Note that we have added a transition property to the CSS for the "box" element. This will give us a smooth animation when we make the element disappear.
Now let's add the Javascript code that will make the div disappear when we click the button.
const box = document.getElementById('box');
const button = document.getElementById('button');
button.addEventListener('click', function() {
box.style.opacity = 0;
box.style.height = 0;
});
First, we use the document.getElementById() method to get references to the "box" and "button" elements in the HTML.
We then add an event listener to the button element that listens for a "click" event. When the button is clicked, the function inside the event listener is executed.
Inside the function, we use the .style property of the "box" element to change its opacity and height to zero. This will make it disappear from view.
That's it! You have successfully created a simple div disappear animation using Javascript. This can be useful for adding some extra interactivity to your website or web application.
Remember to experiment with different CSS transition properties to get the animation just right. You can also use Javascript to make the element appear again after a certain period of time or after some other event has occurred.