WP Bakery 选项卡动画覆盖

Question

我正在尝试覆盖 WP Bakery 的选项卡动画，该动画可将内容垂直滑入和滑出视图。我是一名 JS 经验有限的前端设计师。该站点运行一个主题，但据我在代码中可以看出，选项卡和动画被编码为 Bakery 组件。

只是在寻找一些代码来覆盖这个东西！在我的研究的其他地方似乎完全无法提及这种能力。谢谢！

Answer 1

通过 Google 找到了这个 CSS 片段，其中指出：

.vc_tta-panel.vc_animating {
    opacity: 0;
}

这隐藏了垂直动画，我也在寻找 JS 修复。

Answer 2

我能够使用此 CSS 从 visual composer bakery tab 和 pageable container 组件中删除垂直动画。我必须根据选项卡的位置指定顶部和底部 css 类。这个例子很冗长，展示了如何在所有流行的浏览器上覆盖垂直动画。本质上，您需要在 .vc_tta-panel-body 上将 transform 和 transition 设置为 none。我想为面板添加自定义淡入淡出效果，因此我将淡入淡出 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; }
}

WP Bakery 选项卡动画覆盖

WP Bakery Tab Animation Override

css

wordpress

tabs

transition

wpbakery