时间戳

首页 > 解决方案 > WP Bakery 选项卡动画覆盖

css - WP Bakery 选项卡动画覆盖

问题描述

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

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

标签： csswordpresstabstransitionwpbakery

解决方案

通过使用这个 CSS，我能够从视觉作曲家面包店tab和组件中删除垂直动画。pageable container我必须根据选项卡的位置指定顶部和底部 css 类。这个例子很详细地展示了如何在所有流行的浏览器上覆盖垂直动画。本质上transform，您需要transition在. 我想为面板添加自定义淡入效果，因此我将淡入添加到变换和转换覆盖下方的相同 css 类中。none.vc_tta-panel-bodyanimation


.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; }
}

推荐阅读