Closed magicspon closed 6 years ago
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
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
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