6

I am trying to learn Vue.js and doing a basic fade. I have an list of links that always stay on the page. On clicking the link, I wish to fade in and out the visibility of a div. By default the div isn't seen. This div contains several components. I tried to follow the documentation. However, the element only fades out while leaving, but nothing happens to it when enters. I've removed excess parts of this document and kept the relevant elements.

<template>
   <div class="list">
      <ul>
         <li @click="openWindPoetry">☞ Wind Poetry</li> // button that toggles div show
      </ul>
   </div>
   <div style="width: 97%;" class="project container">
      <transition name="fade" mode="out-in">
         <div v-if="showWP" class="backdrop" @scroll.passive="handleScroll"> // div needed to transition
            <Header theme="WP" header="Wind Poetry" :types="['Interaction','Data Visualisation','2020']"></Header>
            <BodyText theme="WP" heading="ABOUT"
               body="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla magna, consectetur quis tellus eget, ultricies mattis nisi. Duis dictum dolor in ante placerat, non ultricies dui faucibus. Vivamus lobortis sapien porttitor, molestie urna ut, varius neque. In eu dapibus lectus. Etiam consequat, massa ut consequat lacinia, velit dui molestie dolor, id dapibus sem justo a ante. In pellentesque, odio ut pharetra congue, quam tellus efficitur arcu, non mattis risus nibh ac turpis.">
            </BodyText>
            <div class="introImg">
               <video alt="GIF DEMO" loop autoplay="autoplay" src="./assets/wind/wind_poetry-demo-1.mp4"></video>
            </div>
      </transition>
   </div>
</template>

<script>
export default {
  name: "App",
  components: {
    Header,
    Gradient,
    BodyText
  },
  data() {
    return {
      title: "LIST OF WORKS",
      ProjTitle: "Wind Poetry",
      showWP: false
    };
  },
  methods: {
    openWindPoetry() {
      (this.title = "BACK TO HOME"),
        (this.showWP = true),
        (this.showRec = false);
    }
  }
}
</script>

<style>
#app {
  font-family: "Roboto Mono";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
tony19
  • 125,647
  • 18
  • 229
  • 307
Laiqa Mohid
  • 461
  • 3
  • 14
  • What you have should work. Most likely, you have other CSS rules applying on the element which override the transition rules. Without a [mcve] which we could inspect, we can't help with anything. You can't fix a bug you don't see. – tao Jan 01 '21 at 20:29
  • I see, what elements should i be looking out for specifically – Laiqa Mohid Jan 01 '21 at 20:31
  • when i inspect the element the class of enter does appear but instantly goes away – Laiqa Mohid Jan 01 '21 at 20:34
  • To test out my presumption, just place `!important` on the transition rules. If it starts working, I was right. From what you're saying, some other rule you have (with greater specificity) sets the `transition-duration` to less than `0.5` seconds. At the risk of repeating myself: create a *runnable* [mcve] if you need help. What you posted so far doesn't reproduce the bug. – tao Jan 01 '21 at 20:52
  • Here's a simplified test with what you have: https://codesandbox.io/s/elastic-goldberg-bibxg?file=/src/App.vue. Place the bug inside and I might be able to help. – tao Jan 01 '21 at 21:06

1 Answers1

23

In Vue 3, the transition class name has changed from -enter to -enter-from, so your classes should be renamed accordingly to allow the transition calculation to work properly:

/* .fade-enter {/*...*/}  ❌ Vue 2 class name */
.fade-enter-from {/*...*/}

demo

tony19
  • 125,647
  • 18
  • 229
  • 307