CODEWITHSUNDEEP
javascripthtmlcssanimationcss-animations
Froxx
Froxx

Reputation: 1077

Make HTML element disappear with CSS animation

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?

Upvotes: 16

Views: 70433

Answers (6)

fruitloaf
fruitloaf

Reputation: 2892

transition: .5s;

invisible:

opacity: 0;

visible:

opacity: 1;

transition will make it appear and disappear smoothly.

Upvotes: -1

Darin Cardin
Darin Cardin

Reputation: 657

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>

Upvotes: 3

Running Buffalo
Running Buffalo

Reputation: 1323

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

Upvotes: 26

QApps
QApps

Reputation: 303

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>

Upvotes: 5

Tim
Tim

Reputation: 123

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>

Upvotes: 6

sean
sean

Reputation: 1210

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.

Upvotes: 11

Related Questions