Currently, I am working on creating a help button that triggers a help-dialogue box with some animations when clicked.
This is the template I am using:
<template>
<div class="help">
<button v-if="theme" class="help-icon" @click="helpOpen">?</button>
<section class="help-dialogue-box"
:class="{ 'help-open': isHelpOpen, 'help-close': isHelpOpen === false }">
</section>
</div>
</template>
Here is the CSS section:
.help-dialogue-box{
position: absolute;
transform: translateX(50%) scale(0, 0);
top: 50%;
right: 50%;
background-color: honeydew;
width: 75vw;
height: 90vh;
border-radius: 500px;
pointer-events: none;
overflow: hidden;
}
.help-open{
animation-name: expand;
animation-duration: 2s;
animation-direction: normal;
animation-fill-mode: forwards;
pointer-events: all;
}
.help-close{
animation-name: expand;
animation-duration: 2s;
animation-direction: reverse;
animation-fill-mode: forwards;
}
@keyframes expand{
0%{
transform: translateX(50%) scale(0, 0);
border-radius: 500px;
}
50%{
transform: translateX(50%) scale(0.6, 0.6);
}
100%{
transform: translateX(50%) scale(1, 1);
border-radius: 5px;
}
}
If necessary, here is the script part as well:
data(){
return {
isHelpOpen: null
}
}
methods: {
helpOpen(){
this.isHelpOpen = !this.isHelpOpen;
}
}
While the animation works perfectly when adding the help-open class, there seems to be an issue when removing it and adding the help-close class. The element disappears without any animation. I have tried manually adding and removing classes one by one but it didn't solve the problem.
Is there something wrong in my approach?
My goal is for the element to animate in reverse direction when removing the help-open class.