Question

当我向下滚动450px时，图片会按照需要逐渐消失，但是当我再次向上滚动时，它就没有过渡了。我猜它只是转型的一部分。这里是代码和一个gif所以你可以看到我的意思：

https://gyazo.com/b27b6ba31e29a16f8cd0b862ffbfc1a0

INDEX

<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

如果您需要＆＃34;反向＆＃34;淡化效果，您还需要在原始元素（transition＆amp; .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
  }

转型的画面淡出

1 个答案: