Мерцание при выполнении двух css переводов в html - PullRequest
Новая
       13

Мерцание при выполнении двух css переводов в html

1 голос
/ 03 февраля 2020

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

https://codepen.io/roni-thomas/pen/WNbVJbm

var i = 1;
$(document).ready(function() {
  setInterval(function() {
    $(".visible_item")
      .removeClass("visible_item")
      .addClass("hidden_item");
    $("#" + i)
      .removeClass("hidden_item")
      .addClass("visible_item");
    i = i == 3 ? 0 : i + 1;
  }, 5000);
});
body,
html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: black;
}
.marquee {
  overflow: hidden;
  position: fixed;
  color: #fff;
  bottom: 0px;
  background: #fff;
  font-size: 24px;
  font-family: Arial;
}
.marquee_p {
  margin: 0;
  text-align: center;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: scroll-left 40s linear infinite;
  -webkit-animation: scroll-left 40s linear infinite;
  animation: scroll-left 40s linear infinite;
  white-space: nowrap;
  color: #ff4000;
  line-height: 42px;
}
@keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
.image {
  position: absolute;
  margin: 0px;
  padding: 0px;
  width: 100%;
}
.visible_item {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
}
.hidden_item {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
  -webkit-transition: visibility 0s 2s, opacity 2s linear;
  -moz-transition: visibility 0s 2s, opacity 2s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <body>
        <div id="container">
            <img
                id="0"
                src="https://burst.shopifycdn.com/photos/coffee-with-milk.jpg"
                class="image visible_item"
                />
            <img
                id="1"
                src="https://burst.shopifycdn.com/photos/journal-and-coffee-at-table.jpg"
                class="image hidden_item"
                />
            <img
                id="2"
                src="https://burst.shopifycdn.com/photos/pour-over-coffee-to-order-at-cafe.jpg"
                class="image hidden_item"
                />
            <img
                id="3"
                src="https://burst.shopifycdn.com/photos/but-first-coffee-written-next-to-a-cup-of-joe.jpg"
                class="image hidden_item"
                />
        </div>
        <div class="marquee">
            <p class="marquee_p">
                Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text ever
                since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book.
            </p>
        </div>
    </body>
</html>

Я перепробовал почти все возможные комбинации, упомянутые в теме ниже.

Предотвращение мерцания при переходе webkit в webkit -transform 

-webkit-backface-visibility: hidden;-webkit-transform:translate3d(0,0,0); etc

Но, похоже, это не решает проблему.

...