Vue.js sidebar transition

Question

I have a sidebar and a content inside a bootstrap row and I want to animate the toggle of the sidebar and to expand seamlessly the content container, I'm applying those transition classes:

.slide-fade-enter {
  transform: translateX(100%);
  position: relative;
}
.slide-fade-leave, .slide-fade-leave-to {
  transform: translateX(-100%);
  position: absolute;
}

but it flickers when expanding, you can see it here:

https://jsfiddle.net/kd6xpa32/16/

How can I prevent this?

The JsFiddle you provided is working fine, it does not flicker. Maybe it has to do with your machine. — Faran Ali
– Faran Ali, Commented Oct 23, 2020 at 13:47
@FaranAli you can see it here: imgur.com/a/QwpXvkR, the yellow container flickers when doing the transition. — dazzed
– dazzed, Commented Oct 23, 2020 at 14:16
@dazzed you're talking about the flicker/jump when the blue "expands"? — jshrc
– jshrc, Commented Oct 23, 2020 at 19:29
@jshrc exactly, the flicker/jump in the yellow container when de blue one expands. — dazzed
– dazzed, Commented Oct 26, 2020 at 10:22

jshrc · Accepted Answer · 2020-10-23 19:44:51Z

1

Looks like you're doing some dirty stuff with flex and absolute positioning. I'd find a way to leave the sidebar as always absolutely (or relatively) positioned and figure out another way to collapse+expand it. The switch between absolute and relative is causing the rendering issue.

answered Oct 23, 2020 at 19:44

jshrc

1978 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js sidebar transition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related