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来修复它，无法告诉你为什么会产生这样的差异。

过渡导致不透明元素消失

1 个答案: