首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >CSS -禁用菜单动画

CSS -禁用菜单动画
EN

Stack Overflow用户
提问于 2019-09-06 09:13:58
回答 3查看 175关注 0票数 0

就像快速概述-我已经为WordPress购买了一个主题,它的主菜单有自定义的内置动画(从大而透明的开始,然后在滚动上,它变得更薄了,背景是纯色的)。

在过去的几天里,我一直在尝试简单地将滚动菜单设置为永久菜单,并删除动画,但我在这方面没有那么幸运,所以任何帮助都会非常感谢。

Css:

/* 2.报头===*/

代码语言:javascript
复制
.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;
}
EN

回答 3

Stack Overflow用户

发布于 2019-09-06 13:43:04

我可以帮你,你能提供一个主题预览链接吗?

票数 0
EN

Stack Overflow用户

发布于 2019-09-06 13:56:53

您可以删除或注释过渡css。希望它会变成胶状物

代码语言:javascript
复制
.wsmenucontainer header.topheader {
left: 0;
padding: 1rem 0 12rem;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;

//注释此区域以删除过渡

代码语言:javascript
复制
/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */

}

代码语言:javascript
复制
.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%);

//注释此区域以移除图像过渡

代码语言:javascript
复制
/* transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease; */

}

票数 0
EN

Stack Overflow用户

发布于 2019-09-09 14:40:47

要解决这个问题,你可以在你的主题(css自定义区域)中添加一个自定义css,或者通过插件(https://it.wordpress.org/plugins/wp-add-custom-css/)添加你的自定义代码:

代码语言:javascript
复制
.wsmenucontainer header.topheader{
  transition: none; */
    -moz-transition: none;
    /* -webkit-transition: none; */
    -o-transition: none;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57814589

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档