CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-transitions
htoniv
htoniv

Reputation: 1668

Possible to add more than one vue transition effects on the same element

I have two buttons, on clicking of one button i need to make an element slide vue transition effect, on clicking of other button i need to make an element fade vue transition effect.


<template>
    <transition :name="transition ? 'slide-fade' : 'fade'">
        <p>Hello world</p>
    </transition>
    <button @click="shouldSlide">Slide</button>
    <button @click="shouldFade">Fade</button>
<template>

<script>
export default {
    data () {
        return {
            isSlide: false
        }
    },
    computed: {
        transition () {
            return this.isSlide
        }
    },
    methods: {
        shouldSlide () {
            this.isSlide = true
        },
        shouldFade () {
            this.isSlide = false
        }
    }
}
</script>

i know it won't work, because computed happens after the template update. Is there any other way to solve this. Thanks in advance.

Upvotes: 1

Views: 912

Answers (1)

S&#248;lve
S&#248;lve

Reputation: 4406

Your code seems to be correct. You are missing v-if or v-show to trigger the transition

new Vue({
  el: "#aa",
  data() {
    return {
      isSlide: false,
      show: false,
    }
  },
  computed: {
    transition() {
      return this.isSlide
    }
  },
  methods: {
    shouldSlide() {
      this.isSlide = true
      this.show = false;
      setTimeout(() => {
        this.show = true;      
      }, 0)
    },
    shouldFade() {
      this.isSlide = false
      this.show = false;
      setTimeout(() => {
        this.show = true;      
      }, 0)
    }
  }
})
.slide-leave-active,
.slide-enter-active {
  transition: 1s;
}
.slide-enter {
  transform: translate(100%, 0);
}
.slide-leave-to {
  transform: translate(-100%, 0);
}

.fade-leave-active,
.fade-enter-active {
  transition: 1s;
}
.fade-enter {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<main id="aa">
  <transition :name="transition ? 'slide' : 'fade'">
    <p v-if="show">Hello world</p>
  </transition>
  <button @click="shouldSlide">Slide</button>
  <button @click="shouldFade">Fade</button>
<main>

Upvotes: 1

Related Questions