Исчезающий элемент в центре окна при прокрутке

#javascript #scroll

#javascript #прокрутка

Вопрос:

Я использую скрипт, в котором элементы исчезают слева и справа, как только соответствующий элемент полностью прокручивается в поле зрения. Проблема в том, что затухание сохраняется до тех пор, пока элемент полностью не исчезнет из поля зрения. Я пытаюсь реализовать его таким образом, чтобы он исчезал, как только его больше не видно. В противном случае все элементы отображаются одновременно при прокрутке.

 function Utils() {}
Utils.prototype = {
  constructor: Utils,
  isElementInView: function(element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop   $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop   $(element).height();

    if (fullyInView === true) {
      return ((pageTop < elementTop) amp;amp; (pageBottom > elementBottom));
    } else {
      return ((elementTop <= pageBottom) amp;amp; (elementBottom >= pageTop));
    }
  }
};

var Utils = new Utils();
$(window).on('load', addFadeIn());

$(window).scroll(function() {
  addFadeIn(true);
});

function addFadeIn(repeat) {
  var classToFadeIn = ".will-fadeIn";

  $(classToFadeIn).each(function(index) {
    var isElementInView = Utils.isElementInView($(this), false);
    if (isElementInView) {
      if (!($(this).hasClass('fadeInRight')) amp;amp; !($(this).hasClass('fadeInLeft'))) {
        if (index % 2 == 0) $(this).addClass('fadeInRight');
        else $(this).addClass('fadeInLeft');
      }
    } else if (repeat) {
      $(this).removeClass('fadeInRight');
      $(this).removeClass('fadeInLeft');
    }
  });
}

 #locations-mobile {
     height: auto;
     display: block;
}
 #loc1, #loc2, #loc3, #loc4 {
     height: 300px;
     background-size: cover;
}
 .locimg {
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
}
 .loc {
     cursor: pointer;
     height: 100%;
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     position: relative;
     overflow: hidden;
     text-align: center;
}
 .loc .fadedbox, .loc-selected {
     background-color: #202020;
     position: absolute;
     top: 0;
     left: 0;
     color: #fff;
     -webkit-transition: all 300ms ease-out;
     -moz-transition: all 300ms ease-out;
     -o-transition: all 300ms ease-out;
     -ms-transition: all 300ms ease-out;
     transition: all 300ms ease-out;
     opacity: 0;
     width: 100%;
     height: 100%;
}
 .loc:hover .fadedbox, .loc-selected {
     opacity: 0.8;
}
 .loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
     top: 0%;
     left: 0%;
     position: relative;
     text-align: center;
     color: #fff;
     text-decoration: none;
     -webkit-transition: all 300ms ease-out;
     -moz-transition: all 300ms ease-out;
     -o-transition: all 300ms ease-out;
     -ms-transition: all 300ms ease-out;
     transition: all 300ms ease-out;
     transform: translateY(50px);
     -webkit-transform: translateY(50px);
}
 .loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
     transform: translateY(30px);
     -webkit-transform: translateY(30px);
}
 .loc .title {
     font-size: 2.5em;
     text-align: center;
     text-transform: uppercase;
     opacity: 0;
     transition-delay: 0.2s;
     transition-duration: 0.3s;
}
 .will-fadeIn .text .title a {
     color: #fff;
     font-size: 2.5em;
}
 #loc1 {
     grid-area: 1 / 1 / 2 / 2;
     background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260) 
}
 #loc2 {
     grid-area: 1 / 2 / 2 / 3;
     background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260) 
}
 #loc3 {
     grid-area: 1 / 3 / 2 / 4;
     background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260) 
}
 #loc4 {
     grid-area: 1 / 4 / 2 / 5;
     background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260) 
}
 .doing {
     transform: rotate(-35deg);
     display: block;
     position: absolute;
     top: 0;
     left: -90px;
     margin-top: 25px;
     text-align: center;
     width: 300px;
     color: #fff;
}
 .will-fadeIn {
     display: block;
     width: 100%;
     max-width: 640px;
     margin: 0px auto;
     height: 100%;
     background-color: #202020;
}
 .fadeInRight {
     -webkit-animation: fadeInRight .5s ease .4s both;
     -moz-animation: fadeInRight .5s ease .4s both;
     -ms-animation: fadeInRight .5s ease .4s both;
     -o-animation: fadeInRight .5s ease .4s both;
     animation: fadeInRight .5s ease .4s both;
}
 @media (prefers-reduced-motion) {
     .fadeInRight .animated {
         -webkit-animation: unset !important;
         animation: unset !important;
         -webkit-transition: none !important;
         transition: none !important;
    }
}
 .fadeInLeft {
     -webkit-animation: fadeInLeft .5s ease .4s both;
     -moz-animation: fadeInLeft .5s ease .4s both;
     -ms-animation: fadeInLeft .5s ease .4s both;
     -o-animation: fadeInLeft .5s ease .4s both;
     animation: fadeInLeft .5s ease .4s both;
}
 @media (prefers-reduced-motion) {
     .fadeInLeft .animated {
         -webkit-animation: unset !important;
         animation: unset !important;
         -webkit-transition: none !important;
         transition: none !important;
    }
}
 @-webkit-keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-moz-keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-ms-keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-o-keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-webkit-keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-moz-keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-ms-keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-o-keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="locations-mobile">
  <div id="loc1">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/1#">#</a></p>
        <p>
          <a href="#" target="_blank">
            <i class="fas fa-map-marker-alt"></i>#<br /> #
          </a>
        </p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
  <div id="loc2">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/2#">#</a></p>
        <p>
          <a href="#" target="_blank">
            <i class="fas fa-map-marker-alt"></i>#<br /> #
          </a>
        </p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
  <div id="loc3">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/3#">#</a></p>
        <p>
          <a href="#" target="_blank">
            <i class="fas fa-map-marker-alt"></i>#<br /> #
          </a>
        </p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
  <div id="loc4">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/4#">#</a></p>
        <p>
          <a href="#" target="_blank">
            <i class="fas fa-map-marker-alt"></i>#<br /> #
          </a>
        </p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
</section>

Развернуть фрагмент

1. Пожалуйста, можете ли вы добавить свою разметку и стили? Спасибо.

2. Я надеюсь, что это то, что вы имели в виду @Rounin

3. все еще не хватает стилей?

4. @KendelVentonda ваша проблема должна быть воспроизводима во фрагменте, поэтому вы должны опубликовать соответствующий код в виде фрагмента в своем вопросе

5. @schellmax добавил фрагмент кода.

Ответ №1:

Используйте deltaY атрибут в wheel событии для определения прокрутки вверх или вниз.

 window.onwheel = function(event) {
  let div = document.querySelector('div');
  let opacity = getComputedStyle(div).opacity;
  (event.deltaY <= 0) ? (div.style.opacity =  opacity-0.1) : (div.style.opacity =  opacity 0.1);
  document.querySelector('p').innerHTML = 'deltaY: '   event.deltaY;
};

 div {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 10em;
  width: 10em;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: black;
  transition: opacity 0.2s;
}

 <div></div>
<p>deltaY: 0</p>

Развернуть фрагмент

Чтобы попробовать приведенный выше пример, введите режим полной страницы для фрагмента. В противном случае он будет работать, но все равно прокручивать страницу, вызывая не идеальный эффект. Прокрутите вверх для увеличения непрозрачности и прокрутите вниз для уменьшения непрозрачности.

1. К сожалению, это не соответствует моей проблеме, поскольку div зависит от того, полностью ли он виден или нет. И это не может быть определено только с помощью колеса прокрутки. Я должен был опубликовать весь код раньше.

Ответ №2:

Вы можете использовать анимацию в библиотеке прокрутки

Он прост в использовании и более эффективен, надеюсь, это помогло вам

Ответ №3:

Я обновил ваш код, потребуется серьезная очистка, но это демонстрирует решение: (я изменил высоту контейнеров #loc на 150 пикселей, чтобы сделать мое решение воспроизводимым в небольшом предварительном просмотре «выполнить код» здесь)

 function Utils() {}
Utils.prototype = {
  constructor: Utils,
  isElementInView: function(element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop   $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop   $(element).height();
    
    
    

    if (fullyInView === true) {
      return ((pageTop < elementTop) amp;amp; (pageBottom > elementBottom));
    } else {
      return ((elementTop <= pageBottom) amp;amp; (elementBottom >= pageTop));
    }
  }
};

var Utils = new Utils();
$(window).on('load', addFadeIn());

$(window).scroll(function() {
  addFadeIn(true);
});

function addFadeIn(repeat) {
  var classToFadeIn = ".will-fadeIn";

  $(classToFadeIn).each(function(index) {
    var isElementInView = Utils.isElementInView($(this), true);
    if (isElementInView) {
      if (!($(this).hasClass('fadeInRight')) amp;amp; !($(this).hasClass('fadeInLeft'))) {
        if (index % 2 == 0) $(this).addClass('fadeInRight');
        else $(this).addClass('fadeInLeft');
      }
    } else if (repeat) {
      $(this).removeClass('fadeInRight');
      $(this).removeClass('fadeInLeft');
    }
  });
}

 #locations-mobile {
     height: auto;
     display: block;
}
 #loc1, #loc2, #loc3, #loc4 {
     height: 150px;
     background-size: cover;     
}
 .locimg {
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
}
 .loc {
     cursor: pointer;
     height: 100%;
     width: 100%;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
     position: relative;
     overflow: hidden;
     text-align: center;
}
.fadedbox{
  transition:all 1s;
  transform:translateX(-100%);
}
#locations-mobile>div:nth-child(even)>.fadedbox{
  transform:translateX(100%);
}
 .loc .fadedbox, .loc-selected {
     background-color: #202020;
     position: absolute;
     top: 0;
     left: 0;
     color: #fff;
     -webkit-transition: all 300ms ease-out;
     -moz-transition: all 300ms ease-out;
     -o-transition: all 300ms ease-out;
     -ms-transition: all 300ms ease-out;
     transition: all 300ms ease-out;
     opacity: 0;
     width: 100%;
     height: 100%;
}
 .loc:hover .fadedbox, .loc-selected {
     opacity: 0.8;
}
 .loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
     top: 0%;
     left: 0%;
     position: relative;
     text-align: center;
     color: #fff;
     text-decoration: none;
     -webkit-transition: all 300ms ease-out;
     -moz-transition: all 300ms ease-out;
     -o-transition: all 300ms ease-out;
     -ms-transition: all 300ms ease-out;
     transition: all 300ms ease-out;
     transform: translateY(50px);
     -webkit-transform: translateY(50px);
}
 .loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
     transform: translateY(30px);
     -webkit-transform: translateY(30px);
}
 .loc .title {
     font-size: 2.5em;
     text-align: center;
     text-transform: uppercase;
     opacity: 0;
     transition-delay: 0.2s;
     transition-duration: 0.3s;
}
 .will-fadeIn .text .title a {
     color: #fff;
     font-size: 2.5em;
}
 #loc1 {
     grid-area: 1 / 1 / 2 / 2;
     background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260) 
}
 #loc2 {
     grid-area: 1 / 2 / 2 / 3;
     background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260) 
}
 #loc3 {
     grid-area: 1 / 3 / 2 / 4;
     background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260) 
}
 #loc4 {
     grid-area: 1 / 4 / 2 / 5;
     background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=2amp;h=750amp;w=1260) 
}
 .doing {
     transform: rotate(-35deg);
     display: block;
     position: absolute;
     top: 0;
     left: -90px;
     margin-top: 25px;
     text-align: center;
     width: 300px;
     color: #fff;
}
 .will-fadeIn {
     display: block;
     width: 100%;
     max-width: 640px;
     margin: 0px auto;
     height: 100%;
     background-color: #202020;
}
 .old_fadeInRight {
     -webkit-animation: fadeInRight .5s ease .4s both;
     -moz-animation: fadeInRight .5s ease .4s both;
     -ms-animation: fadeInRight .5s ease .4s both;
     -o-animation: fadeInRight .5s ease .4s both;
     animation: fadeInRight .5s ease .4s both;
}
.fadeInRight{
  transform:translateX(0) !important;
}
 @media (prefers-reduced-motion) {
     .fadeInRight .animated {
         -webkit-animation: unset !important;
         animation: unset !important;
         -webkit-transition: none !important;
         transition: none !important;
    }
}
 .old_fadeInLeft {
     -webkit-animation: fadeInLeft .5s ease .4s both;
     -moz-animation: fadeInLeft .5s ease .4s both;
     -ms-animation: fadeInLeft .5s ease .4s both;
     -o-animation: fadeInLeft .5s ease .4s both;
     animation: fadeInLeft .5s ease .4s both;
}
.fadeInLeft{
  transform:translateX(0) !important;
}
 @media (prefers-reduced-motion) {
     .fadeInLeft .animated {
         -webkit-animation: unset !important;
         animation: unset !important;
         -webkit-transition: none !important;
         transition: none !important;
    }
}
 @-webkit-keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-moz-keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-ms-keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-o-keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @keyframes fadeInRight {
     from {
         opacity: 0;
         -webkit-transform: translate3d(100%, 0, 0);
         -moz-transform: translate3d(100%, 0, 0);
         -ms-transform: translate3d(100%, 0, 0);
         -o-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-webkit-keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-moz-keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-ms-keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @-o-keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 @keyframes fadeInLeft {
     from {
         opacity: 0;
         -webkit-transform: translate3d(-100%, 0, 0);
         -moz-transform: translate3d(-100%, 0, 0);
         -ms-transform: translate3d(-100%, 0, 0);
         -o-transform: translate3d(-100%, 0, 0);
         transform: translate3d(-100%, 0, 0);
    }
     to {
         opacity: .8;
         -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
         -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="locations-mobile">
  <div id="loc1">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/1#">#</a></p>
        <p>
          <a href="#" target="_blank">
            <i class="fas fa-map-marker-alt"></i>#<br /> #
          </a>
        </p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
  <div id="loc2">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/2#">#</a></p>
        <p>
          <a href="#" target="_blank">
            <i class="fas fa-map-marker-alt"></i>#<br /> #
          </a>
        </p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
  <div id="loc3">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/3#">#</a></p>
        <p>
          <a href="#" target="_blank">
            <i class="fas fa-map-marker-alt"></i>#<br /> #
          </a>
        </p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
  <div id="loc4">
    <div class="fadedbox will-fadeIn">
      <div class="text">
        <p class="title"><a href="/standorte/4#">#</a></p>
        <p>
          <a href="#" target="_blank">
            <i class="fas fa-map-marker-alt"></i>#<br /> #
          </a>
        </p>
        <p><a href="#"><i class="fas fa-phone"></i>#</a></p>
      </div>
    </div>
  </div>
</section>

Развернуть фрагмент

Наиболее важным изменением является переключение с css-анимации на css-переходы, что упрощает исчезновение элементов, когда они полностью видны, и исчезают, когда они уходят.

Вернитесь ко мне, если вам понадобятся дополнительные пояснения здесь.