Переопределение анимации вкладки WP Bakery
Я пытаюсь переопределить анимацию вкладок WP Bakery, которая перемещает контент по вертикали в и из поля зрения. Я фронтенд-дизайнер с ограниченным опытом работы с JS. На сайте есть тема, но, насколько я могу судить по коду, вкладки и анимация закодированы как компоненты Bakery.
Просто ищу код, чтобы переопределить эту вещь! Ссылки на эту способность, кажется, полностью недоступны в других местах моего исследования. Спасибо!
Ответы 2
Нашел этот фрагмент CSS через Google, в котором говорится:
.vc_tta-panel.vc_animating {
opacity: 0;
}
Это скрывает вертикальную анимацию, я также ищу исправление JS.
Мне удалось удалить вертикальную анимацию из компонентов tab и pageable container визуального композитора с помощью этого CSS. Мне пришлось указать верхний и нижний классы css в зависимости от положения вкладок. Этот подробный пример показывает, как переопределить вертикальную анимацию во всех популярных браузерах. По сути, вам нужно установить transform и transition на none на .vc_tta-panel-body. Я хотел добавить к панелям настраиваемый эффект затухания, поэтому я добавил fadein animation к тем же классам css под заменами преобразования и перехода.
.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-panel .vc_tta-panel-body,
.wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-bottom .vc_tta-panel .vc_tta-panel-body {
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-sand-transform: none;
-o-transform: none;
transform: none;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Спасибо, Ян, приятно знать, что здесь нет JS!
Я обнаружил, что использование приведенного выше кода действительно удаляет анимацию по умолчанию. Это решение, в сочетании с применением базовой функции анимации Bakery к дочерним элементам контейнера вкладок, анимирует содержимое при смене вкладок. Однако он анимирует контент только при входе, но не при выходе. Думаю, у Йена более плавный эффект затухания.