Closed deflexor closed 3 years ago
Your request is very vague. What components?
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.
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://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.
Confirm feature request
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:
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.
@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>
@johnleider The visual issue specific to progress components has been recreated and updated in #7705. I believe this issue can be closed.
@deflexor could you update your reproduction? The link is dead.
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;
}
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;
}
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.
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
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