animating between display block/none

[Dave Stockley]

Hello,

I'm trying to knock together a nice little animated dropdown menu thing. Thought i'd give your library a little play, it sounds super sweet!

Anyhow... Am I going horribly wrong or is this the expected behaviour for toggling
display: block < > none;

https://codepen.io/magicspon/pen/NXXoOp?editors=0011
// see comments at the end of the code.

cheers

[Anas]

Yes this is an expected behavior

The F in FLIP stands for First, which call element.getBoundingClientRect() to get the current position and dimensions of the element. If the element is hidden, this will return {"x":0,"y":0,"width":0,"height":0,"top":0,"right":0,"bottom":0,"left":0} hence no animation (check those slides for more information).

To solve the issue, you have to add the element to the normal flow before starting the FLIP:

onClick = () => {
    this.$content.classList.toggle('hidden');
    this.flip.wrap(() => {
        this.$content.classList.toggle(this.classHook)
    })()
}

I forked your pen to illustrate my point https://codepen.io/tntrazor/pen/JMpagO (I have renamed move to c-dropdown__menu--open)

Furthermore, I think the FLIP technique is not needed in your case, you can easily animate a dropdown with transform and/or opacity, I have created another fork without flipping https://codepen.io/tntrazor/pen/jYZeWW

[Dave Stockley]

thanks @anasbouzid

You're quite right, flip isn't really required here, but I thought it would be a nice simple test to play with.

Thanks for your reply