Please help me create this transition
Hi I am using vue transition to create this drawer menu. But I don't know how to create this semicircle open close transition.
6 Replies
If I had to guess, it would be animating a clipPath
100% i would use a circle clip-path for that
Hi @b1mind @Kevin
https://codepen.io/AparAwasthi/full/XWyJRjg
So was able to create the transition by clip-path but if I have a different transition duration for opacity & clip-path then when it opens then it's a smooth transition but while closing it's not smooth.
Can you tell me what I am doing wrong here?
I would combine those into a keyframe maybe
if you wanted to control different transition timing/values on the same animation
Is it not possible with transition?
I want to use this with vue transitions
idk why you coldn't use animation: and keyframes with it
but I also don't have a clue what Vue Transitions is
š¤·āāļø
if it was only limited to the
transition declaration though its not a very good lib *imo
https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
There is your example
assuming that is what you are using
Native CSS animations are applied in the same way as CSS transitions, with the difference being that *-enter-from is not removed immediately after the element is inserted, but on an animationend event.