0

I'm using jQuery for append and remove a div on DOM.

I need a CSS method to fadeIn and fadeOut that div with a simple transition, (maybe also just opacity).

But what I need is to not use jQuery addClass or animate: just CSS!

Is it possible?

Maybe I can use animate.css library? But there is just fadeIn or fadeOut method, not both at the same time. And I cannot use javascript for adding/remove classes.

  • What do you mean exactly to fadein and fadeout? something like this? https://codepen.io/mcoker/pen/YQewgW – Michael Coker Jun 29 '17 at 15:46
  • That is not possible for the removal part. CSS doesn't know when an element is going to be removed from the DOM so it doesn't know when to do an animation for the element being removed. – Patrick Evans Jun 29 '17 at 15:54
  • @MichaelCoker, yes, but I need to remove the div from DOM and have a fadeOut. –  Jun 29 '17 at 16:15
  • What do you mean have a fadeout? The CSS I posted fade in, then fades out. And you can't remove an element from the DOM with CSS. – Michael Coker Jun 29 '17 at 16:17
  • Can you describe step by step what it is you're trying to achieve? – Michael Coker Jun 29 '17 at 16:17
  • Obvious question: is this for academic purposes (ie no real-world scenario and just for the knowledge?) Because if you're *already* using jquery to add/remove the nodes, then adding a simple `.fadeOut()` after seems to be the most efficient response. Or is the add/remove part of a 3rd party library you can't change? – freedomn-m Jun 29 '17 at 16:23
  • @freedomn-m Both. –  Jun 29 '17 at 16:27

2 Answers2

2

You can achieve this with :empty and a transition:

var div = $('<div/>').html('Surprise!!');
$('#wrap').append(div);
#wrap {
    text-align:center;
    background-color: #eeeeee;
    display: block;
    height:0px;
    width:300px;    
    transition:all 2s ease-in;
    overflow:hidden;
    opacity:0;
}

#wrap:not(:empty){    
    height:100px;
    opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrap"></div>

Note seems a bit hit&miss in code snippet (works sometimes), see this jsfiddle: https://jsfiddle.net/D2Xht/381/

Source: https://christianheilmann.com/2015/08/30/quicky-fading-in-a-newly-created-element-using-css/

freedomn-m
  • 27,664
  • 8
  • 35
  • 57
  • I like a lot your solution and I already found it online. But I have a problem. If I insert a text in div and then I remove it the text disappear instantaneoulsy. I can use a `:before` maybe? But then I have the `:before` element ever present on the page... See this: https://jsfiddle.net/yxw2dj5v/ –  Jun 29 '17 at 16:33
  • I maybe can have a text with a BLINK effect or something else. I can't have the blink effect on the parent div, but on the div I append. –  Jun 29 '17 at 16:34
  • Just realised you needed it on remove as well, so had a go - I see what you mean about the text going immediately: https://jsfiddle.net/D2Xht/382/ I suspect that's because the remove actions instantly on the text, but the `transition` is actually on the parent (in both cases), not the div itself. – freedomn-m Jun 29 '17 at 16:35
2

You can actually use the css animation property which run animation as soon the class added.

The animation can run once so you don't have to remove the class after the animation occurs.

so this is the div:

     <div class="fade-in"></div>

And this is the css:

@keyframes fade-in{
from {opacity: 0;}
to {opacity: 1;}
}
.fade-in{
animation-name: fade-in;
animation-iteration-count: 1;
animation-duration: 500ms;
}

About fade-out, as far as I know, you must add a class for setting the fade-out animation.

more about css animations: https://www.w3schools.com/css/css3_animations.asp

similar question: css3 transition animation on load?

OB1.K
  • 52
  • 4