html - 图片淡出过渡

Question

当我向下滚动 450 像素时，图片会根据需要淡入，但当我再次向上滚动时，它就消失了，没有任何过渡。我想这只是过渡的问题。这是代码和 gif，因此您可以明白我的意思:

https://gyazo.com/b27b6ba31e29a16f8cd0b862ffbfc1a0

索引

<div class="logo_aftereffects"></div>
 <div class="logo_premierepro"></div>

        <script>
              $(window).scroll(function() {
                 if($(window).scrollTop() >= 200) {
                    $('div#myTopnav').addClass('scrolled');
                    $('a').addClass('scrolled2');
                 if($(window).scrollTop() >= 430) {
                    $('div.sidebar').addClass('scrolled3');
                    $('div.logo_premierepro').addClass('scrolled4');
                    $('div.logo_aftereffects').addClass('scrolled5');
                    } else {
                    $('div.sidebar').removeClass('scrolled3');
                    $('div.logo_premierepro').removeClass('scrolled4');
                    $('div.logo_aftereffects').removeClass('scrolled5');
                    }
                    } else {
                    $('div#myTopnav ').removeClass('scrolled');
                    $('a').removeClass('scrolled2');

                  }
                });
              function myFunction() {
                  $("#myTopnav").toggleClass('responsive');
                  $("div.sidebar").toggleClass('responsive');

              }
        </script>

CSS

  .logo_aftereffects {
        background: url('/images/aftereffects_icon.png');
        width: 64px;
        min-height: 64px;
        background-size: cover;
        margin-top: 50px;
        float: left;
        opacity: 0;

  }

  .logo_premierepro {
        background: url('/images/premierepro_icon.png');
        width: 68px;
        min-height: 68px;
        background-size: cover;
        margin-top: 49px;
        float: right;
        opacity: 0;
  }

  .scrolled {
        min-height: 10px;
        color: inherit;
        background: black;
        transition: 0.35s all ease-in-out;
        opacity: 0.7;
  }

  .scrolled2 {
        color: white;
        opacity: 1;
  }

  .scrolled3 {
        transition: .85s all ease-in-out;
        background: #d2a679;
        opacity: 0.8;
  }

  .scrolled4 {
        opacity: 1;
        transition: 1s all ease-out;
        float: right;
        margin-right: 38%;
  }

  .scrolled5 {
        opacity: 1;
        transition: 1s all ease-out;
        float: left;
        margin-left: 38%;
  }

Answer 1

如果您需要“反向”淡入淡出效果，您还需要在原始元素上显式提供 transition 属性(.logo_aftereffects & .logo_premierepro)。

.logo_aftereffects {
        background: url('..');
        width: 64px;
        min-height: 64px;
        background-size: cover;
        margin-top: 50px;
        float: left;
        opacity: 0;
        transition: 1s all ease-out; //added
  }

  .logo_premierepro {
        background: url('..');
        width: 68px;
        min-height: 68px;
        background-size: cover;
        margin-top: 49px;
        float: right;
        opacity: 0;
        transition: 1s all ease-out; //added
  }