javascript - 过渡导致具有不透明度的元素消失

Question

我在尝试创建可切换侧边栏时发现了一个奇怪的错误。我有一组带有以下代码的社交媒体图标，可以让它们在悬停时改变不透明度:

.snIcons {
    filter: opacity(.4);
    -webkit-filter: opacity(.4);
    -o-filter: opacity(.4);
    -moz-filter: opacity(.4);
    -ms-filter: opacity(.4);
    transition: 0.3s filter linear;
    -webkit-transition: 0.3s -webkit-filter linear;
    -moz-transition: 0.3s -moz-filter linear;
    -ms-transition: 0.3s -ms-filter linear;
    -o-transition: 0.3s -o-filter linear;
}

.snIcons:hover {
    filter: opacity(1);
    -webkit-filter: opacity(1);
    -o-filter: opacity(1);
    -moz-filter: opacity(1);
    -ms-filter: opacity(1);
    transition: 0.3s filter linear;
    -webkit-transition: 0.3s -webkit-filter linear;
    -moz-transition: 0.3s -moz-filter linear;
    -ms-transition: 0.3s -ms-filter linear;
    -o-transition: 0.3s -o-filter linear;
}

在 HTML 中，它们的布局如下:

<div class="sidebar-footer">

              <a href="https://twitter.com/PixcelDev"><img class="snIcons" src="Images/twitter.png"/></a>
              <a href="https://www.facebook.com/pixcelstudios"><img class="snIcons" src="Images/facebook.png"/></a>
              <a href="https://uk.linkedin.com/in/pixcelstudios"><img class="snIcons" src="Images/linkedin.png"/></a>
              <a href="https://www.reddit.com/user/Pixcel_Studios/"><img class="snIcons" src="Images/reddit.png"/></a>
              <br>
              <a href="https://instagram.com/pixceldev/"><img class="snIcons" src="Images/instagram.png"/></a>
              <a href="https://www.behance.net/pixcelstudios"><img class="snIcons" src="Images/behance.png"/></a>
              <a href="https://github.com/Pixceldev"><img class="snIcons" src="Images/github.png"/></a>
              <a href="http://pixceldev.deviantart.com/"><img class="snIcons" src="Images/deviantart.png"/></a>
              <h3>Copyright Joeb Rogers

</div>

我正在使用以下 jQuery 在点击时隐藏侧边栏的某些元素:

$("#collapse").click(function() {
    $(".sidebar-nav").toggleClass("hidden");
    $(".sidebar-footer").toggleClass("hidden");
    $("#sidebar-wrapper").toggleClass("collapsed");
    $(".sidebar-head").toggleClass("collapsed");
});

它们一开始看起来很好，一切都很好。但是，一旦我将侧边栏切换为消失，然后将其切换回全尺寸，只有两个图标出现。当我将鼠标悬停在它们应该在的位置上时，它们会重新出现。它似乎以某种方式通过切换 display: none 然后恢复正常，它弄乱了它们的初始不透明度状态并将其设置为 0，但它说它仍然在检查器中设置为 0.4。

奇怪的是，当我删除 html 中的中断并再次尝试时，可以看到不同的两个图标(两个彼此相邻)，而通常是两个垂直相对的图标。

除了去除不透明度之外，有人知道如何解决这个问题吗？谢谢!

编辑:我发现它与切换侧边栏的大小而不是显示类型有关。当我切换侧边栏时，它会从全屏变为 80px 然后再返回(移动)。我只是将它更改为 60px，并且在切换回来时没有一个图标是可见的。我相信，如果容器的大小变得小于它们的位置，那么它们的不透明度就会困惑。不知道为什么，我尝试将 .hidden 类更改为 visibility: hidden 而不是 display: none 但没有任何变化。

编辑 2:好的，所以我已经将问题调试到我用于更改边栏大小的过渡效果。因为我在单击时更改显示，所以在容器足够大之前再次创建元素(转换需要 0.3 秒)。由于某种原因，这意味着它们没有被渲染。任何人都知道任何可以帮助解决这个问题的修复方法吗？

Answer 1

我设法通过使用 fadeToggle("slow") 而不是 toggleClass 来修复它，无法告诉您为什么这会造成如此大的不同。