CODEWITHSUNDEEP
javascriptvue.jsvue-transitions
Stephen
Stephen

Reputation: 1183

Vue transition buttons fading in and out

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)
},

Upvotes: 1

Views: 968

Answers (1)

Dan Knights
Dan Knights

Reputation: 8368

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.

Upvotes: 2

Related Questions