Issue
So I making a help button which pop up a help-dialogue box on a button click with some animations
This is my template.
<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>
this is my css part
.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;
}
}
and if needed the script part.
data(){
return {
isHelpOpen: null
}
}
methods: {
helpOpen(){
this.isHelpOpen = !this.isHelpOpen;
}
}
so when the help-open class is added it animates perfectly but when the help-close class gets added and help-open gets removed there is no animation in reverse direction, actually no animation at all (the section disappear immediately). I've tried adding and removing the classes manually by removing and adding the classes one by one but it didn't work.
Am I doing anything wrong here?
I basically want the element to animate in reverse direction when the help-open class is removed.
Solution
Vue provides an in-build transition functionality to easily implement the transitions. There are also some in-built mode which you can use with the transitions. Even if you want some custom transitions then you can use the custom transition classes.
Answered By - Yash Maheshwari
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.