Animate center div while hiding sidebars using Vue Transitions

Question

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>

Matias · Accepted Answer · 2022-06-30 16:07:25Z

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>

Collectives™ on Stack Overflow

Animate center div while hiding sidebars using Vue Transitions

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related