1

I tried to create a dropdown menu, clicking on a toggle icon.

This is a jsFiddle with a very simplified example. The core of script is:

if( !$(target).hasClass('open') )
    $(target).show().addClass('open');
else
    $(target).removeClass('open').on('transitionend',function(e){
      $(target).hide();
  });

My problem is that submenu must appear with a transform:scale() from 0 to 1, BUT I need that container (highlighed by red borders) adapt it's size depending by appereance of submenu.

Hiding it runs correctly with my code, but showing it does not fire scale transition and I don't know how to solve...

Luca Detomi
  • 5,564
  • 7
  • 52
  • 77
  • try adding open class to the parent and animate the child. that will work for sure. – Richa Oct 06 '16 at 11:19
  • It seems there is no easy solution for. The best post for this thema I've found is this: [CSS Transform with element resizing](http://stackoverflow.com/questions/10858523/css-transform-with-element-resizing) – Andy Tschiersch Oct 06 '16 at 11:46
  • @Era I thought about applying css class to parent, especially to optimize performances applying only one class and not two on different elementes (toggle and menu) but I don't understand how this could help for my specific problem – Luca Detomi Oct 06 '16 at 12:34
  • @AndyTschiersch Thanks Andy, I read that question/answer and I found a possible solution but... it relies on pre-calculating final width/height of container. I thought about a similar solution too but.... is not so efficient.... like "fire to a bug with a bazooka" :-D – Luca Detomi Oct 06 '16 at 12:49

1 Answers1

0

Use visibility: hidden instead of display: none when toggling with CSS using animation. This also concerns usage of jQuery show / hide.

Tigran
  • 2,800
  • 1
  • 19
  • 19
  • Unfortunately this is not a solution because with `visibility: hidden` container remain always "big", as evident by red borders, while I need that it become large only as much as toggle button when dropdown is collapsed – Luca Detomi Oct 06 '16 at 12:35
  • Is animating width/height instead an option? – Tigran Oct 06 '16 at 12:51
  • No for the same reasons, performances. Please look at [this link](https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool) to more details about why transforms are better. – Luca Detomi Oct 06 '16 at 12:55