CSS - 禁用菜单动画答案

【问题标题】：CSS - disabling a menu animationCSS - 禁用菜单动画
【发布时间】：2020-01-08 21:26:52
【问题描述】：

作为一个快速概述 - 我已经为 WordPress 购买了一个主题，它的主菜单具有自定义的内置动画（从大而透明的开始，然后在滚动时，它会变得更薄，并带有纯色背景）。

过去几天我一直在尝试将滚动菜单简单地设置为永久菜单并摆脱动画，但我没有那么幸运，因此非常感谢任何帮助.

CSS：

/* 2. 标题 ================================================== =============*/

.wsmenucontainer header.topheader {
    background: #222;
}
.wsmenucontainer header.topheader {
    left: 0;
    padding: 1rem 0 12rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.wsmenucontainer header.topheader .header-image {
    background: #222;
    height: 100%;
    left: 0;
    opacity: 1;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
}
.wsmenucontainer header.topheader .header-image img {
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
header.topheader.scroll {
    background: #222;
    padding: 0;
}
header.topheader.scroll .header-image img {
    opacity: 0;
}
.noHeadImage  header.topheader {
    padding: 1rem 0;
    background:transparent;
}
.noHeadImage .header-image {
    display:none;
}
.noHeadImage header.topheader.scroll {
    background: #222;
    padding: 0;
}
main section {
    padding: 8rem 0;
}
main section#single-class{
    padding: 0;
}

【问题讨论】：

标签： css wordpress animation wordpress-theming css-animations

【解决方案1】：

Jordy 我帮你，你能提供一个主题预览链接吗？

【讨论】：

没问题，就在这里：preview.themeforest.net/item/…

【解决方案2】：

您可以删除或评论过渡 css。希望它会消失

.wsmenucontainer header.topheader {
left: 0;
padding: 1rem 0 12rem;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;

//评论此区域以删除过渡

/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */

}

.wsmenucontainer header.topheader .header-image img {
left: 0;
opacity: 0.5;
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

//评论此区域以去除图像过渡

/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */

}

【讨论】：

【解决方案3】：

要修复它，您可以在主题中添加自定义 css（css 自定义区域）或通过插件 (https://it.wordpress.org/plugins/wp-add-custom-css/) 您的自定义代码：

.wsmenucontainer header.topheader{
  transition: none; */
    -moz-transition: none;
    /* -webkit-transition: none; */
    -o-transition: none;
}

【讨论】：