JavaScript 缓动

Question

首先感谢您帮助我解决问题。 Stackoverflow 是一个很棒的社区。还知道我对 Javascript 很陌生。

此问题涉及我正在构建的网站:http://www.thewanderingguru.com/m2world2/?portfolio=the-trout

将浏览器的宽度更改为小于 960 像素，以便显示移动菜单。现在单击页面右侧的菜单图标。您将看到主菜单栏出现，并且左侧的站点 Logo 在页面下方重新调整。

我的问题是如何让 Logo 不“跳跃”上下。我做了一些研究，发现了我认为用于缓解过渡的 Jquery 库:例如 here但我不确定如何在我的网站上实现这一点。要知道该网站是由 Wordpress 运行的。

我将包含在单击菜单图标时管理 Logo 的类转换的代码。 '.ubermenu-skin-vanilla.ubermenu-responsive-toggle' 是菜单图标的类，单击该图标时，会将“world” Logo (div id= '#logo') 的类从 'logo1' 更改为 '标志2'

我尝试添加 CSS 过渡，但这并不能帮助缓解 #logo div 的跳跃。我认为需要 javascript 缓动，但我不知道如何实现它。再次感谢您的所有帮助和建议。

这是 JavaScript:

<script type="text/javascript">jQuery(document).ready(function($) {$('.ubermenu-skin-vanilla.ubermenu-responsive-toggle').click(function(){$('#logo').toggleClass('logo1');$('#logo').toggleClass('logo2');});});</script>

这是我当前的 CSS:

@media only screen and (min-width: 0px) and (max-width:959px){
.logo1{
  margin-top: 20px !Important;
  max-width: 90px !Important; 	
transition: margin-top,max-width .7s ease-in-out !Important;
-webkit-transition: margin-top,max-width .7s ease-in-out !Important;
-o-transition: margin-top,max-width .7s ease-in-out !Important;
-moz-transition: margin-top,max-width .7s ease-in-out !Important;
}
.logo2{
  margin-top: 20px  !Important;
  max-width: 90px  !Important; 	
transition: margin-top,max-width .7s ease-in-out  !Important;
-webkit-transition: margin-top,max-width .7s ease-in-out  !Important;
-o-transition: margin-top,max-width .7s ease-in-out  !Important;
-moz-transition: margin-top,max-width .7s ease-in-out  !Important;
}


.logo2{
  margin-top: 170px  !Important;
  max-width: 90px  !Important; 	
transition: margin-top,max-width .7s ease-in-out  !Important;
-webkit-transition: margin-top,max-width .7s ease-in-out  !Important;
-o-transition: margin-top,max-width .7s ease-in-out  !Important;
-moz-transition: margin-top,max-width .7s ease-in-out  !Important;
}
}

PS。我知道在我的 CSS 中我使用了很多“!重要”，这不是最佳实践，但我使用的主题会不断覆盖我的代码，除非我这样做。谢谢!

Answer 1

transition: margin-top,max-width .7s ease-in-out !Important;

您将transition 属性应用于两个 属性，但仅指定一个 持续时间(等等)。 Firefox 是这样解释的:

注意到第一个持续时间为何总是0s？这就是问题所在(始终首先查看调试器和 CSS 分析器等)!

幸运的是，Firefox 还以这样的方式重新格式化该属性，以便我们知道如何更改语法并正确应用值:

transition: margin-top .7s ease-in-out,max-width .7s ease-in-out !important;

现在两个转换属性都有一个持续时间，并且两个都有一个计时函数。将此应用于使用多个转换属性的所有规则，并且转换至少可以工作。现在您只需要稍微调整一下值就可以了。

另外:这是!重要，而不是!重要。