vue.js - transition transform not working

Question

i am currently making my first site in vue.js. I want to translate my navbar in mobile devices to slide in and out on click. My code is working only when it comes to show element. It has smooth animation, but when it comes to slide out my navbar is just disappearing. I was trying all clases, leave-to, leave etc. I can't figure it out. My child component:

<template>
  <div class="menusite" v-if="active">
    <ul>
      <li v-for="site in siteList" :key= "site.id">
        {{ site.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'menusite',
  props: {
    active: Boolean,
  },
  data() {
    return {
      siteList: [
        { name: 'O nas' },
        { name: 'Oferta' },
        { name: 'Realizacje' },
        { name: 'Kontakt' },
      ],
    };
  },
};
</script>

My parent component:

<template>
  <div class="navbar">
    <img src="@/assets/burger.png" alt="burger" class="burger" @click="active=!active">
    <NavbarLogo />
    <transition name="slide">
      <NavbarList :active="active" />
    </transition>
  </div>
</template>

<style lang="scss" scoped>
  .navbar {
    width: 100%;
    background-color: white;
    transition: 1.5s;
    position: absolute;
    z-index: 4;
    .burger {
    height: 60px;
    position: absolute;
    right: 13px;
    top: 13px;
    z-index: 10;
    }
    .slide-leave-active, .slide-enter-active {
      transition: all .8s ease;
    }
    .slide-enter, .slide-leave-to {
      transform: translateX(-100%);
      opacity: 0;
    }
  }
</style>

AlekseyHoffman · Accepted Answer · 2019-12-11 08:17:07Z

3

Your element doesn't have out transition because it is removed from the DOM when v-if="false".

Change v-if to v-show in the following line, this will make it invisible when the value is false, but it will not get removed from the DOM, so the transition will be applied:

<div class="menusite" v-if="active">

The issue might also be caused by CSS styles, here's a working example with modified CSS structure:

Codepen: https://codepen.io/AlekseiHoffman/pen/JjoXLxd

 <transition name="slide">
    <div class="menusite" v-if="active">
      <ul>
        <li v-for="site in siteList" :key="site.id">
          {{ site.name }}
        </li>
      </ul>
    </div>
 </transition>

 ...

 .slide-leave-active, .slide-enter-active {
   transition: all .8s ease;
 }
 .slide-enter, .slide-leave-to {
   transform: translateX(-100%);
   opacity: 0;
 }

edited Dec 11, 2019 at 8:17

answered Dec 10, 2019 at 19:24

AlekseyHoffman

2,7241 gold badge15 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BooBoo Over a year ago

It make sense for me, but after I changed it stoped working in both ways

Collectives™ on Stack Overflow

vue.js - transition transform not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related