Quiero agregar algunas animaciones a mi sitio web. Mi objetivo es expandir el div central mientras las barras laterales se deslizan. Hasta ahora solo he logrado el movimiento de las barras laterales, pero estoy luchando para que el centro las acompañe.
También intenté agregar una Transición al div central, pero me di cuenta de que no entra en un estado de entrada / salida como las barras laterales, así que intenté usar un observador después de eso, pero he estado atascado por un tiempo. .
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>