I am facing a challenge in creating a split animation with two icons. My goal is to split the icons with some translation in the X-axis after hovering on the container, but it seems like I am missing something in my implementation. The animation does not work on Codepen, and in my application, although it works, the icons return to their original position after the animation and using the "forwards" property does not solve the issue.
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<div @mouseenter="showButtons()" @mouseleave="hideButtons()" class="container">
<transition name="icon-left">
<span v-show="show_buttons"> A </span>
</transition>
<transition name="icon-right">
<span v-show="show_buttons"> B </span>
</transition>
</div>
</div>
</body>
</html>
const { createApp } = Vue
createApp({
data() {
return {
show_buttons: false,
}
},
methods: {
showButtons() {
this.show_buttons = true
},
hideButtons() {
this.show_buttons = false
}
}
}).mount('#app')
.container {
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 400px;
border: 1px black solid ;
}
.icon-left-enter-from {
opacity: 0;
transform: translate(0px);
}
.icon-left-enter-active {
transition: all 0.3s forwards;
}
.icon-left-enter-to {
opacity: 1;
transform: translate(-200px);
}
.icon-right-enter-from {
opacity: 0;
transform: translate(0px);
}
.icon-right-enter-active {
transition: all 0.3s forwards;
}
.icon-right-enter-to {
opacity: 1;
transform: translate(200px);
}
Check out the live Codepen demo here