removeClass() 中的转换属性不起作用答案

【问题标题】：Transition property in removeClass() doesnt workremoveClass() 中的转换属性不起作用
【发布时间】：2020-10-16 11:53:28
【问题描述】：

如果调用 removeClass() 方法，我的转换有问题。
如果调用 removeClass 方法，则过渡将不起作用。
如果调用 addClass 方法，则过渡有效。

当（粘性）标头到达“div”标签时执行代码。当到达“div”标签时，从属性“ .showElement.bkg-btn-orange-header" 被执行。但是如果再次向上滚动，则不会发生任何过渡，按钮会直接消失。

这里是代码

JS-代码


$(document).scroll(function () {

    var y = $(this).scrollTop();
        var heroShot= $('.section.triggerAddClass').offset().top - $("header").height();
        var footer= $('.section.triggerAddClass2').offset().top - $("header").height();
        if (y >= heroShot && footer >= y) {
            $('.bkg-btn-orange-header').addClass("showElement");
        } else {
            $('.bkg-btn-orange-header').removeClass("showElement");
        }
});

HTML 代码：

.....

<ul>
  <li>
    <div>
      <a href="#home" class="text-uppercase bkg-btn-orange-header">Test</a>
    </div>
   </li>
 </ul>

.....

<div class="section triggerAddClass">
  <div class="row">
     <div class="column">
        <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
     </div>
    </div>
</div>

CSS 代码

.section{
    padding-top: 11rem;
    padding-bottom: 11rem;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1
}

.triggerAddClass{
/*Empty*/
}

.triggerAddClass2{
/*Empty*/
}

.bkg-btn-orange-header {
    background-color: #e67e22;
    border-color: #e67e22;
    padding: 1.3rem 1.3rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 1s;
    transition: 1s;
}

.showElement.bkg-btn-orange-header {
    visibility: visible;
    opacity: 1;
    -webkit-transition: 1s;
    transition: 1s;
}

我希望有人可以帮助我。谢谢:)

【问题讨论】：

我会尝试将-webkit-transition: 1s; transition: 1s; 放在一个不会被删除的单独类中，并将该类也应用于元素。
这是因为visibility 立即设置为hidden。您需要为 visibility 的过渡创建一个特殊情况，在该情况下，您将其延迟与隐藏元素时 opacity 过渡的持续时间相同。

标签： javascript html jquery css

【解决方案1】：

它立即消失的原因是它的visibility 立即设置为hidden。您需要延迟visibility: hidden，直到转换完成。另一方面，您需要在显示元素时立即设置visibility: visible，否则淡入过渡将不起作用。

换句话说，延迟需要在showElement 类被删除时发生。为此，只需将.bkg-btn-orange-header 规则中的转换表达式更改为：

   -webkit-transition: opacity 1s, visibility 0s 1s;
   transition: opacity 1s, visibility 0s 1s;

在您的.showElement.bkg-btn-orange-header 规则中保留现有的转换表达式，以便它覆盖前一个并立即设置visibility: visible。

【讨论】：