I want to add some animations to my website. My goal is to expand the center div while the sidebars are sliding away. So far I've only accomplished the movement of the sidebars, but I'm struggling to make the center go along with them.
I've tried to add a Transition to the center div as well, but I realized it doesn't go into a enter / leave state like the sidebars so I tried to use a watcher after that but I've been stuck for a while.
var app = new Vue({
el: '#app',
data: {
showSidebars: true,
},
methods: {
animate() {
this.showSidebars = !this.showSidebars;
}
}
});.container {
display: flex;
width: 600px;
height: 200px;
margin-bottom: 1em;
}
.sidebar {
flex-grow: 1;
background-color: #564D95;
}
.center {
flex-grow: 3;
background-color: #242C44;
transition: all 0.3s linear;
}
.center:hover {
flex-grow: 5;
}
/* Vue Transitions */
.expand-left-enter-active {
animation: expand-left 0.3s ease reverse;
}
.expand-left-leave-active {
animation: expand-left 0.5s ease;
}
.expand-right-enter-active {
animation: expand-right 0.3s ease reverse;
}
.expand-right-leave-active {
animation: expand-right 0.5s ease;
}
@keyframes expand-left {
0% {
opacity: 1;
transform: translate(0%);
}
100% {
opacity: 0;
transform: translate(-100%);
}
}
@keyframes expand-right {
0% {
opacity: 1;
transform: translate(0%);
}
100% {
opacity: 0;
transform: translate(100%);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container">
<!-- left -->
<transition name="expand-left">
<div v-show="showSidebars" class="sidebar"></div>
</transition>
<!-- center -->
<div class="center"></div>
<!-- right -->
<transition name="expand-right">
<div v-show="showSidebars" class="sidebar"></div>
</transition>
</div>
<button @click="animate">Animate</button>
</div>