CODEWITHSUNDEEP
cssvue.jsvuetify.js
Alex T
Alex T

Reputation: 3754

Vue/Vuetify transition only one way

Is it possible to set transition to trigger only one way for the v-btn? I created button with text that changes depending on the condition and use transition to change it smoothly. However if i change view and condition changes the transition reverses and it looks glitchy. I dont want this behaviour, and only would like to have transition trigger one way.

 <v-btn
        class="ma-1"
        @click="addToList"
        width
        :disabled="isAdded"
        >
          <span v-if="!isAdded">  
                Add to List
          </span> 
          <v-slide-x-transition>
            <span v-if="isAdded">
              Added
              <v-icon>
                mdi-check
              </v-icon>
            </span>
        </v-slide-x-transition>
</v-btn>

Here is example how this works:

https://codepen.io/pokepim/pen/VwKNzxj?editors=101

In the carousel when you switch between slides you can see that button reverses back and it extends width and generally this looks somewhat glitchy. Is it possible to only keep transition when clicking on the button in this case (so no backward transition from disable to active button)?

EDIT: I tried Dan's answer, and while it works fine with the carousel case it still does not solve glitchy transition in general, here is the example of same behaviour using method instead of computed property: https://codesandbox.io/s/vuetifyvuex-store-testing-ground-wyl4n?file=/src/App.vue

Upvotes: 2

Views: 913

Answers (1)

Dan
Dan

Reputation: 63089

There's only one isAdded condition being used for all of the slides. When that condition is false on the next slide, it gets set before the animation is finished and it looks bad.

Use a method instead of a computed for isAdded so each slide can maintain its own button state:

methods: {
  addToList() {
    this.btnlist.push(this.model);
  },
  isAdded(i) {
    return this.btnlist.includes(i);
  }
}

And change all isAdded in the template to isAdded(i).

Here's the updated demo

To your edit, try the hide-on-leave attribute on the transition:

<v-slide-x-transition hide-on-leave>
  <span v-if="isAdded(this.idUn)">
    Added
    <v-icon> mdi-check </v-icon>
  </span>
</v-slide-x-transition>

Upvotes: 3

Related Questions