Лаг анимации CSS в Safari - PullRequest
Новая
       8

Лаг анимации CSS в Safari

0 голосов
/ 23 декабря 2018

У меня есть галерея, построенная с использованием HTML и CSS.Каждый элемент в галерее должен быть кликабельным, и на: hover должно отображаться краткое описание того, что содержит этот конкретный элемент.Весь эффект основан на том, что Apple имеет на новостном сайте .

Код, который у меня есть, прекрасно работает как на Firefox, так и на Chrome, но в Safari (v12) я по-прежнему отстаю.

У меня есть следующий Jquery: 

$(document).ready(function(){
      $(".item").hover(function(){
        $(this).find(".description_container").css("height", "auto").css("margin", "0 20px 20px 20px");
        $(this).find(".description").css("opacity", "1");
        $(this).find("img").css("opacity", "0.5");
        $(this).find("video").css("opacity", "0.5");
        $(this).css("box-shadow","0 0 30px 0 rgba(0,0,0,0.15)").css("cursor","pointer");
      }, function(){
        $(this).css("box-shadow","0 0 0 0 rgba(0,0,0,0.0)").css("cursor","default");
        $(this).find("img").css("opacity", "1");
        $(this).find("video").css("opacity", "1");
        $(this).find(".description_container").css("height", "0px").css("margin", "0 20px");
        $(this).find(".description").css("opacity", "0");
      });
    });

HTML: 

<div class="gallery">
        <div class="item">
          <img src="placeholder.png">
          <!-- The whole item is a link -->
          <a href="https://example.com/" style="position: absolute; top: 0; left: 0; width:100%; height:100%;">
          <div class="content">
          <p class="tags"><span class="gato">#</span>
          <span class="tag">Sample tag 1</span>
          <span class="tag">Sample tag 2</span>
          <!-- Title -->
          <h2>This is an Item's Title!</h2>
          <!-- Date -->
          <p class="date">December 2018</p>
          <!-- Description -->
          <div class="description_container">
          <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div></div></a></div>
</div>

и CSS: 

    * {
      -webkit-transition: all 0.2s ease;
      -moz-transition:    all 0.2s ease;
      -ms-transition:     all 0.2s ease;
      -o-transition:      all 0.2s ease;
    }

    .gallery {
      margin: 60px auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }

    .item {
      width: 100%;
      border-radius: 4px;
      position: relative;
      padding-bottom: 105px;
      border-bottom: solid #D9E7F6 2px;
      overflow: hidden;
      box-shadow: 0 0 0 0 rgba(0,0,0,0.0);
      background-color: black;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
    }

    .item img {
      opacity: 1;
      display: block;
      width: 100%;
      height: auto;
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      user-drag: none;
    }

    .item .content {
      position: absolute;
      width: 100%;
      bottom: 0;
      background-color: white;
      text-align: left;
    }

    .item .tags {
      margin: 20px 0 0 20px;
    }

    .item .tags .gato {
      font-size: 12px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: #9FB8D8;
      margin-right: 5px;
    }

    .item .tags .tag {
      font-size: 12px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: #0071FF;
      margin-right: 5px;
    }

    .item h2 {
      font-size: 20px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: black;
      margin: 5px 20px;
    }

    .item .date {
      font-size: 12px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: #9B9B9B;
      margin: 0 20px 20px 20px;
    }

    .item .description {
      position: relative;
      opacity: 0;
      font-size: 12px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-weight: 500;
      color: #9B9B9B;
      margin: 0;
    }

    .item .description_container {
      position: relative;
      height: 0px;
      margin: 0 20px;
    }
  • [видео] См.это в Chrome .
  • [Видео] Посмотреть в Safari .

Ответы [ 2 ]

0 голосов
/ 23 декабря 2018

На самом деле, если вы хотите получить супер плавный эффект, вы должны играть с transform (rotate, scale, translate, matrix, skew ...), только со свойствами непрозрачности.Вам следует избегать анимации высоты и поля, как это возможно.Потому что эти свойства вызывают перекрашивание и / или перекомпоновку на странице .Вот еще одна хорошая ссылка, которая дает более подробную информацию о , какие свойства вы должны использовать , чтобы получить анимацию 60fps.

Мы собираемся сразу перейти к преследованию.Современные браузеры могут очень дешево анимировать четыре вещи: положение, масштаб, вращение и непрозрачность.Если вы анимируете что-то еще, это на свой страх и риск, и есть вероятность, что вы не получите гладкие и гладкие 60 кадров в секунду.

Также вам следует избегать использования JS или jQuery для анимации или выбора элементов.когда CSS может сделать работу правильно.Здесь ваш эффект может быть достигнут только при использовании псевдокласса :hover.На самом деле Apple (на странице, которую вы дали) создает анимацию только с помощью CSS -> :hover.jQuery, может вызвать глубокий анализ глубины в DOM и вставить некоторые ненужные элементы в желаемую анимацию 60fps.в своем коде вы добавили много js для того, чтобы воспроизвести поведение, которого css может достичь в одиночку очень-очень быстрым способом.Обычный способ сделать это: если родительский элемент находится, наведите курсор на все классы, которые покрывают его дочерние элементы в вашей таблице стилей CSS (не Js) .

Это простой пример: 

.parent-el {
  position: relative;
  cursor: pointer;
}

.child-el-1 {
  transform: translate3D(0,0,0);
  transition: transform .4s ease;
}
.child-el-2 {
  transform:rotate(0);
  transition: transform .4s ease;
}

.parent-el:hover .child-el-1 {
  transform: translate3D(100px,0,0);
}
.parent-el:hover .child-el-2 {
  transform: rotate(45deg);
}

В вашем случае это может быть: 

.item { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); ...} // A better approach way to achieve it, is to use :after/:before pseudo element that contains box-shadow that you will animate with opacity property (0-1).
.item:hover { box-shadow: 0 0 30px 0 rgba(0,0,0,0.15); ... }

.container { opacity: 0; ...}
.item:hover .container { opacity: 1; ...}

.item img, .item video{ opacity: 1; ...}
.item:hover img, .item:hover video{ opacity: .5; ...}

...

И не забудьте установить свойство transitionдля каждого (Кроме того, селектор * может оказаться сложным в будущем для вашего кода).

Чтобы закончить, вы можете попробовать добавить свойство will-change , которое может помочьулучшение производительности в анимации (необходимо использовать при модерации).

Есть много вещей, которые можно сказать / написать о производительности fps в сети, но я уверен, что эти короткие советы помогут вам в вашем поиске производительности веб-анимации.

0 голосов
/ 23 декабря 2018

Я думаю, это может произойти, потому что вы используете find () alot,

Этот метод перемещается вниз по потомкам элементов DOM, вплоть до последнего потомка

используйте children () для прямого доступа к chelidren или querySelector () или любого другого подхода.

...