[Feature Request] Some simple way to disable transition

[deflexor]

New Functionality

Disable transition animations of some Vuetify components

Improvements

no known workarounds

Bugs or Edge Cases it Helps Avoid

Will make appplication faster and more responsive

[johnleider]

Your request is very vague. What components?

[deflexor]

Here is example:

http://jsbin.com/milutorumu/edit?html,js,output

You can try and click "map" button few times and you'll see that sometimes map is painted in half width because it calculates its size while animation still runs. Currently I see only 2 ways to fix it: either disable animation or subscribe to drawer's transitionend event and recalculate map dimensions inside it. But none of them available now.

[kaliatech]

I think another example might be the progress components. I am using v-progress-linear to display audio playback progress from within a requestAnimationFrame handler. The progress often seems choppy and doesn't seem keep pace, especially on ios. I think because the slide-x-transition transition is too slow for this purpose and CSS transitions are overlapping. Afaict, there is no way to disable or configure the transition outside of CSS/Stylus overrides. It seems valid for certain use-cases of progress component to require immediate update without transition.

This jsfiddle shows the issue:

• https://jsfiddle.net/kaliatech/L92t9tvz/

[andrewharvey]

https://codepen.io/andrewharvey/pen/KxZmex?editors=1111

@transitionend doesn't fire as it's not the navigation drawer that's transitioning it's all the other content.

[blackboxx]

Confirm feature request

[johnleider]

https://codepen.io/andrewharvey/pen/KxZmex?editors=1111

@transitionend doesn't fire as it's not the navigation drawer that's transitioning it's all the other content.

This is unrelated and has been fixed since v1.1 https://codepen.io/johnjleider/pen/JQEprm?editors=1111

I think another example might be the progress components. ...

This jsfiddle shows the issue:

• https://jsfiddle.net/kaliatech/L92t9tvz/

This is slightly unrelated but is something I'll resolve for v2.0

---

@deflexor The provided example no longer works. With regards to transitions, any component that supports defining one can be disabled. If you have specific components that have internals elements with transitions that cause visual anomalies (such as the example above), please provide me with additional information, otherwise I'll consider this resolved.

[johnleider]

@kaliatech Could you create a new issue for your specific issue. For now the workaround would be to disable the transition on the element:

<style lang="sass">
  .my-progress-linear .v-progress-linear__determinate
    transition: none !important
</style>

[kaliatech]

@johnleider The visual issue specific to progress components has been recreated and updated in #7705. I believe this issue can be closed.

[johnleider]

@deflexor could you update your reproduction? The link is dead.

[mitar]

7705 has been closed with wontfix. But I agree that disabling transition in an easy way on progress bar would be useful. I was just hit with the same issue.

[oscar6echo]

Not just progress bar. It would be critical on sliders too.
If the slider is synced to a process that moves fast, or worse loops, then the slider is seriously lagging and choppy too. I would argue this is a case where less (transitions) is more (useful).

I tried to add the css below.
On the dev tools, it shows that transition-duration goes down to 0s.
But for some reason the slider is still lagging.
Pls advise.

.v-input__control .v-input__slot {
  transition: none !important;
  transition-timing-function: none !important;
}

[EricRenault]

For people looking for an answer on disabling the v-slider animation, I managed to do it with this snippet in CSS (Vuetify v2.3.9):

.v-slider__thumb-container, .v-slider__track-background, .v-slider__track-fill {
    transition: none !important;
}

[nekosaur]

Thank you for the Feature Request and interest in improving Vuetify. Unfortunately this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.

[MetRonnie]

I think this is mostly possible in Vuetify 3:

// src/plugins/vuetify.js
import { createVuetify } from 'vuetify'

export default createVuetify({
  defaults: {
    global: {
      transition: 'no',
      ripple: false,
    },
  },
})

See https://vuetifyjs.com/en/features/global-configuration/#setup