CODEWITHSUNDEEP
javascriptcssvue.js
BooBoo
BooBoo

Reputation: 99

vue.js - transition transform not working

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>

Upvotes: 5

Views: 3539

Answers (1)

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

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;
 }

Upvotes: 3

Related Questions