Animate display block/none, with the comportement of that

Question

So, I will explain clearly, I want to animate a list, when I click on article for example, this hide all other the element and only show all article related on the click

That content replace each other compared at the start that is the comportement of display block/none.

But I can't animate this so if you have a solution I take them !

I don't care about the animation, I want to understand the principle.

Thank

In juery there is .fade(), slideUp() and slide(), but you can also add css natural animation, there is a code when you click one element it hides the other element fading — bdalina, Aug 29 '17 at 15:56
In your list you could listen for a click on a specific article and then `filter()` it against an array with the other articles in order to get a list of articles that you want to hide. Then you could apply a `class` with `display: none`. — csalmeida, Aug 29 '17 at 16:07
Possible duplicate of [Transitions on the display: property](https://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — CBroe, Aug 29 '17 at 16:18

csalmeida · Accepted Answer · 2017-08-29T16:24:22.953

3

You could hide the elements out using jQuery like bdalina suggested and show the only the article that was clicked.

// Hides all articles but the one clicked.
$('article').click(function(){
 $('article').slideUp();
  $(this).slideDown();
});

body {
  font-family: sans-serif;
  background: #003B93;
}

section {
  width: 200px;
  margin: 20px auto;
}

article {
  cursor: pointer;
  margin-bottom: 20px;
  text-align: center;
  background: #BABABA;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  width: 150px;
  padding: 20px;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <article>First article.</article>
  <article>Second article.</article>
  <article>Third article.</article>
  <article>Fourth article.</article>
  <article>Fifth article.</article>
</section>

Please have a look at this answer as well, it shows another approach to the problem.

Hope this helps in some way.

edited Aug 29 '17 at 16:24

answered Aug 29 '17 at 16:15

csalmeida

528
7
26

I forgot the slideUp and slideDown in jQuery thanks ! But I have another question, my script are already run with vanilla JS, the second developper on that project work with jQuery, I use that function but for you it's correct to construct script with vanilla and jQuery. In my case, it's only these two function else it's run only with vanilla – KolaCaine Aug 29 '17 at 19:34
I understand [Jonathan](https://stackoverflow.com/users/8180379/jonathan), if that's the only bit of jQuery that you will have on the project then you will need to consider if it's worth it recreating the effect in vanilla JS or use a library for all your app animations ([GSAP](https://greensock.com/gsap) is a really good one), depending on how much time you have. If you want to keep it simple you could implement CSS animations and use the [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) method to apply classes as you see fit. Let me know if that helped! – csalmeida Aug 30 '17 at 08:24
I use another lib, but I can't resolve that problem, you can check my codepen for some information if you have time : https://codepen.io/anon/pen/XayOJz – KolaCaine Aug 30 '17 at 12:01

voloshin · Answer 2 · 2017-08-30T05:40:32.967

1

Sadly, but an animation between block and none is impossible.

Instead, you can use two steps animation with opacity.

Here's an example with a css bias.

HTML:

...
<div class="block opacity hidden">...</div>
...

CSS (don't forget to add transition):

.block {
  display: block;
  opacity: 1;
}

.block.opacity {
  opacity: 0;
}

.block.hidden {
  display: none;
}

jQuery:

$('.block').removeClass('hidden'); // the block is still invisible
setTimeout( function() {
  $('.block').removeClass('opacity'); // now the block is visible
}, 100); // small delay is needed, better if it's equal the transition time

It's simple. As the alternatives you can use .fadeIn() and .fadeOut() methods or .animate().

UPD

You should remember that timeout in the reverse function have to equals the duration of transition, or the element will be hidden before the end of the animation.

$('.block').addClass('opacity');
setTimeout( function() {
  $('.block').addClass('hidden');
}, 100);

UPD2

JS:

var el = document.getElementsByClassName('block');
el.classList.remove('hidden');
setTimeout( function() {
  el.classList.remove('opacity');
}, 100);

edited Aug 30 '17 at 05:40

answered Aug 29 '17 at 16:04

voloshin

536
7
17

forgot the slideUp and slideDown in jQuery thanks ! But I have another question, my script are already run with vanilla JS, the second developper on that project work with jQuery, I use that function but for you it's correct to construct script with vanilla and jQuery. In my case, it's only these two function else it's run only with vanilla – KolaCaine Aug 29 '17 at 19:35
I'm not sure if I understood you correctly. You said you want to understand the principle. Here it is. If you really need this written without jQuery, I just updated my answer. Rewriting that kind of functions using pure js is very simple, you could do it by yourself. I believe that now you can handle the reverse function using my example. – voloshin Aug 30 '17 at 05:48
In my case your solution does not work look my code maybe helping you for understand that problem when I have https://codepen.io/anon/pen/XayOJz – KolaCaine Aug 30 '17 at 09:30

Animate display block/none, with the comportement of that

2 Answers2