Make HTML element disappear with CSS animation

Asked 15/9, 2016 at 14:28 Answered 6/2, 2022 at 16:19

Solved javascript html css animation css-animations

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?

Finedrawn answered 15/9, 2016 at 14:28 Comment(5)

this could help #15907579 – Newfangled 15/9, 2016 at 14:30

Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet. See How to create a Minimal, Complete, and Verifiable example – Marlinemarlinespike 15/9, 2016 at 14:35

This will entirely depend on what effect you are going for and how the removal of the element is supposed to affect other elements after removal. – Marlinemarlinespike 15/9, 2016 at 14:44

I added an answer that works perfectly, it disappears with fade and display property is set to none – Candida 15/9, 2016 at 14:48

@Finedrawn I figured out that I had a mistake, see again if this does what you want – Candida 15/9, 2016 at 15:46

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.

Cracknel answered 15/9, 2016 at 14:30 Comment(1)

It looks like you're right. Well, the way with the timeout isn't that bad anyway. I just wondered if there's an easier way without JS. – Finedrawn 15/9, 2016 at 16:23

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;
}

Icehouse answered 15/9, 2016 at 14:41 Comment(2)

Display: none at the end of the animation doesn't work (these days?!), I am trying this now in Chrome without "luck". – Grundyism 15/5, 2020 at 10:20

See related question: #46575720 – Bizerte 16/8, 2021 at 12:54

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.

Cracknel answered 15/9, 2016 at 14:30 Comment(1)

It looks like you're right. Well, the way with the timeout isn't that bad anyway. I just wondered if there's an easier way without JS. – Finedrawn 15/9, 2016 at 16:23

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>

Soche answered 15/9, 2016 at 15:32 Comment(0)

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>

Candida answered 15/9, 2016 at 14:31 Comment(5)

Well, the animation works indeed, but that's not what I asked for. I asked whether it's possible to play a CSS animation when I remove an element - not how to hide an element (that's still there in the end). – Finedrawn 15/9, 2016 at 15:18

I know that it works... ^^ But the element is still in the DOM at the end. That's my problem. I want to remove the element from the DOM (not simply hide it with display: none), and I wanted to know if there's a solution without JS's setTimeout(). But I think I will just go the timeout way. – Finedrawn 15/9, 2016 at 15:49

I didn't get what you want, do you want to remove the source code of the object like users won't see it in inspect the element? or just it doesn't affect in anyway the code? – Candida 15/9, 2016 at 15:52

I have a script that displays every single record in a data table as an element. This table gets modified during runtime, so the DOM (the HTML source code) gets modified during runtime, too. When I add a new element for a new record of the data table, it's no problem because the normal animation property of CSS gets triggered. But when the element gets removed it's a bit harder, because it seems that there's no integrated listener for that. And my question is if there is one I don't know about. But it doesn't seem to be like this so I need to set a timeout that delays the element's deletion. – Finedrawn 15/9, 2016 at 16:21

Oh ok I get it now – Candida 15/9, 2016 at 16:24

I think you would have to do it in two steps. first the animate. Then, after animate is done, remove the elem. See the function below. Perhaps it could be put in a jquery plugin?

<style>
    #test{
        background: red;
        height: 100px;
        width: 400px;
        transition: height 1s;   
    }

    #test.hide {
        height: 0;       
    }

</style>

<div id="test"> </div>

<button>Hide the Div</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>


        $('button').click(function(){
            removeWithAnimate('#test');
        });


        function removeWithAnimate(id){
            $(id).addClass('hide');
            setTimeout( function(){
                    $(id).remove()
            },1000);;   
        }

</script>

$('button').click(function() {
  removeWithAnimate('#test');
});

function removeWithAnimate(id) {
  $(id).addClass('hide');
  setTimeout(function() {
    $(id).remove()
  }, 1000);;
}

#test {
  background: red;
  height: 100px;
  width: 400px;
  transition: height 1s;
}

#test.hide {
  height: 0;
}

<div id="test"> </div>

<button>Hide the Div</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

Raskin answered 15/9, 2016 at 14:35 Comment(2)

That would be a nice solution, if the element could stay in the DOM, but it doesn't. I need to remove it, but thanks. – Finedrawn 15/9, 2016 at 14:38

@Froxx: "if the element could stay in the DOM, but it doesn't" true..."I need to remove it" yes this is what happens after 1 second (when the animation on height is finished). This will do what you prefer, but it involves a timer being set. The solution by Buffalo is without a (javascript at least) timer but does not finally remove the element, it resides in the DOM but isn't displayed anymore. – Grundyism 15/5, 2020 at 10:17

-1

transition: .5s;

invisible:

opacity: 0;

visible:

opacity: 1;

transition will make it appear and disappear smoothly.

Keese answered 6/2, 2022 at 16:19 Comment(0)

Recommended topics

Hot tags