Html 带过渡的图像淡出

当我向下滚动450px时，图片会根据需要淡入，但当我再次向上滚动时，它就消失了，没有过渡。我想这只是过渡的问题。这是代码和gif，您可以看到我的意思：

索引

如果需要“反向”淡入效果，还需要在原始元素上显式提供

过渡

属性（

.logo\u aftereffects

和

.logo\u premierepro

）

---

你能创建一个小提琴吗？你应该添加这个css

.logo\u aftereffects{transition:1s all ease-in；}.logo\u premierepro{transition:1s all ease-in；}

很乐意帮助。。你也是：）

<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>

  .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%;
  }

.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
  }