Menu
I want to know if there is a way to make an HTML element disappear with an animation of CSS. So when the element gets removed from the page by some script, an animation shall display before the element actually gets removed.
Is this possible in an easy way? Or do I need to set a timer to my script that starts the animation with a duration of X and removes the element after time X?
392
You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.
To hide an HTML element after certain seconds using CSS, you can use the @keyframes CSS rule and set the CSS property called visibility to value hidden for that particular element in CSS.
In the CSS, use the @keyframes rule paired with fadeIn. At 0%, set the opacity to 0. At 100%, set the opacity to 1. This creates the fade-in effect.
The document. getElementById will select the div with given id. The style. display = "none" will make it disappear when clicked on div.
Thankfully, when it comes to making HTML elements disappear, CSS offers a variety of options. Let’s take an HTML element with the class “ghost” and hide it. By default, HTML elements are visible. Their default visibility CSS property is visible, but you can flip the script and go:
Hiding elements and CSS animations 1 Making elements disapear in CSS. If you think of hiding elements with CSS, display: none; is probably that first comes to your mind. ... 2 Get it out of the way. Let's go with the transform property to make the removed element disapear to the right of the screen. 3 Collapsing smoothly. ...
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.
The removed class also bears the animation-fill-mode: forwards; property to make sure the element keeps the styles at the end of the animation. Without it, the element would instantly got back to where it was at the start of the animation… not really what we want.
I would get fancy with keyframes
@keyframes myAnimation{
0%{
opacity: 1;
transform: rotateX(90deg);
}
50%{
opacity: 0.5;
transform: rotateX(0deg);
}
100%{
display: none;
opacity: 0;
transform: rotateX(90deg);
}
}
#myelement{
animation-name: myAnimation;
animation-duration: 2000ms;
animation-fill-mode: forwards;
}
If the script is actually removing the DOM element, I don't believe there's a way to fade it out. I think the timer is your only option.
36
I use jQuery to implement this.
//jQuery
$(document).ready(function() {
var target = $("#div");
$("#btn").click(function() {
removeElement(target);
});
});
function removeElement(target) {
target.animate({
opacity: "-=1"
}, 1000, function() {
target.remove();
});
}div {
width: 100px;
height: 100px;
background-color: #000;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="div"></div>
<input type="button" value="fadeout" id="btn">
</body>
</html>Use transitions like this:
function waithide()
{
var obj = document.getElementById("thisone");
obj.style.opacity = '0';
window.setTimeout(
function removethis()
{
obj.style.display='none';
}, 300);
}div
{
height:100px;
width :100px;
background:red;
display:block;
opacity:1;
transition : all .3s;
-wekit-transition : all .3s;
-moz-transition : all .3s;
}<div id="thisone" onclick="waithide()"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
