I'm currenty working on a straightforward icon animation within a VueJS application. I've implemented a Vue transition to create a fade effect on the background elements, but I'm exploring options for a subtle upward shift animation specifically for the icon itself.
Although I've successfully achieved the desired upward shift, I am wondering if there is a way to reverse the transition once the _active class is removed?
All I want is for the icon to shift up and the background to fade in upon click, and then smoothly return to its original position with the background fading out.
I have a Codesandbox link ready which includes the code below:
Codesandbox Link: https://codesandbox.io/s/animated-icon-f96df?file=/src/components/HelloWorld.vue:0-8880
<template>
<div class="wrapper">
<!-- Your template code goes here -->
</div>
</template>
<script>
// Your script goes here
</script>
<style lang="sass" scoped>
/* Your styles go here */
_....
/* End of your styles */
</style>