css - WP Bakery 选项卡动画覆盖

Question

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

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

Answer 1

通过使用此 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; }
}