Блог

Главная - Вопросы по программированию - Vue.js переход на боковую панель

Vue.js переход на боковую панель

#vue.js

#vue.js

Вопрос:

У меня есть боковая панель и содержимое внутри строки начальной загрузки, и я хочу анимировать переключение боковой панели и плавно расширять контейнер содержимого, я применяю эти классы перехода:

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

но он мерцает при расширении, вы можете увидеть его здесь:

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

Как я могу предотвратить это?

Комментарии:

1. Предоставленный вами JsFiddle работает нормально, он не мерцает. Возможно, это связано с вашей машиной.

2. @FaranAli вы можете увидеть это здесь: imgur.com/a/QwpXvkR , желтый контейнер мигает при выполнении перехода.

3. @dazzed вы говорите о мерцании / скачке, когда синий «расширяется»?

4. @jshrc точно, мерцание / скачок в желтом контейнере при расширении синего.

Ответ №1:

Похоже, вы делаете какие-то грязные вещи с гибким и абсолютным позиционированием. Я бы нашел способ оставить боковую панель как всегда абсолютно (или относительно) позиционированной и найти другой способ свернуть развернуть ее. Переключение между абсолютным и относительным вызывает проблему с рендерингом.