Vue transition buttons fading in and out

Question

I have a project which contains a form. When the form has been successfully being received by the backend the button should be we swapped with a different button that confirms to the user that his request went trough.

But when I try to do this using Vue and transitions I can get the buttons to swap but the fading in and out doesn't work. The buttons just instantly swap.

This is the transition with the buttons inside the template:

<transition name="fade" mode="out-in">
    <button
        v-if="!valid"
        class="my-3 px-4 py-3 rounded-md shadow-sm text-base font-medium text-white-primary bg-red-primary hover:bg-red-secondary"
        @click="checkForm"
    >
        Request Beta Access
    </button>
    <button
        v-if="valid"
        class="my-3 px-4 py-3 rounded-md shadow-sm text-base font-medium text-white-primary bg-green-300 hover:bg-red-secondary"
        @click="checkForm"
    >
        Request Sended
    </button>
</transition>

This is the function where my local variable valid is being changed. I am using a timeout at this point to simulate the sending of the form to the backend. The first setTimeout simulates a small delay when you send the form to the backend. The second timeout is for displaying the success button for 2 seconds by changing the local valid variable:

async sendBetaRequest () {
    setTimeout(() => {
        this.clearForm()
        this.valid = true

        setTimeout(() => {
            this.valid = false
        }, 2000)
    }, 1000)
},

I have no CSS transition classes. I have found this example on the vue docs https://vuejs.org/v2/guide/transitions.html#Transition-Modes . I thought adding the name and mode to the transition would do the transitioning. — Stephen, Dec 21 '20 at 10:09
You need to define the transition somewhere. The most common way is [using CSS classes](https://vuejs.org/v2/guide/transitions.html#CSS-Transitions), but, you can also use [JavaScript hooks](https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks). — Daniel_Knights, Dec 21 '20 at 10:13
I wan't have the same css as the button in the example of the vue docs. I don't know how to do this in css. — Stephen, Dec 21 '20 at 10:32

score 2 · Accepted Answer · edited Jul 15 '22 at 22:50

As I said in my comment, you need to define the transition yourself, Vue doesn't supply them for you.

The most common method is to use CSS classes.

Here's an example:

new Vue({
  el: '#app',
  data: {
    valid: false
  },
  methods: {
    sendBetaRequest() {
      setTimeout(() => {
        this.valid = true

        setTimeout(() => {
          this.valid = false
        }, 2000)
      }, 1000)
    },
  }
})

.fade-enter-active,
.fade-leave-active {
  opacity: 1;
  transition: opacity 0.3s;
}

.fade-leave-to,
.fade-enter {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <transition name="fade" mode="out-in">
    <button v-if="!valid" @click="sendBetaRequest" :key="1">
        Request Beta Access
    </button>
    <button v-else :key="2">
        Request Sended
    </button>
  </transition>
</div>

There are transition libraries you can use for this, but, if you're new to Vue, I'd recommend getting to grips with this sooner, rather than later, as it's something you'll need to know further down the line.

Sorry I am quite new to transitions and Vue. But where do I define the script precisely? — Stephen, Dec 21 '20 at 11:06
Good stuff, no problem. That script is just the CDN version of Vue for the SO snippet to work. — Daniel_Knights, Dec 21 '20 at 11:11

Vue transition buttons fading in and out

1 Answers1