[Vuejs]-Animate center div while hiding sidebars using Vue Transitions

by

1👍

✅

Thanks to this question I was able to find a solution. I just added a class with a computed and made the transition there.

var app = new Vue({
  el: '#app',
  data: {
    showSidebars: true,
  },
  methods: {
    animate() {
      this.showSidebars = !this.showSidebars;
    }
  },
  computed: {
    expanded() {
      return !this.showSidebars ? 'expanded' : '';
    }
  }
});
.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.5s linear;
}

.center.expanded {
  flex-grow: 25;
}


/* 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" :class="expanded"></div>

    <!-- right -->
    <transition name="expand-right">
      <div v-show="showSidebars" class="sidebar"></div>
    </transition>
  </div>

  <button @click="animate">Animate</button>
</div>
👤Matias

Leave a comment