Вызывает ли преобразование под box-shadow проблему с производительностью - PullRequest
Новая
       19

Вызывает ли преобразование под box-shadow проблему с производительностью

0 голосов
/ 24 февраля 2019

Я узнал, что box-shadow приведет к серьезным проблемам с производительностью, если элемент будет перекрашен.Теперь проблема в том, что есть элемент A с box-shadow, а элемент B под ним будет выполнять анимацию преобразования (фактически элемент A также может выполнять анимацию преобразования).Итак, я хочу знать, если это вызывает проблемы с производительностью, для анимации A и B? 

let img = document.querySelector('img');
let bar = document.querySelector('.bar');
let button = document.querySelector('button');
let showBar = true;
button.addEventListener('click', ()=>{
  showBar = !showBar;
  bar.style.transform = `translateY(${showBar ? 0 : '-100%'})`;
});
let transImg = false;
img.addEventListener('click', ()=>{
  transImg = !transImg;
  let ratio = transImg ? 1: .5;
  img.style.transform = `matrix(${ratio},0,0,${ratio},${transImg?80:0},0)`;
});
.parent {
  width: 600px;
  height: 160px;
  background: #666;
  overflow: hidden;
}

.bar {
  color: white;
  transition: 400ms;
  width: 100%;
  height: 30px;
  background: rgba(0,0,0,0.3);
  box-shadow: 0 0 5px 3px rgba(0,0,0,0.5);
  position: absolute;
  z-index: 10;
}

.b {
  transition: 500ms;
  transform-origin: 0 0;
  transform: matrix(.5,0,0,.5,0,0);
}

button {
  position: relative;
  top: -120px;
}
 
<div class="parent">
  <div class="bar">Bar</div>
  <button>toggle bar</button>
  <img class="b" src="https://www.gstatic.com/webp/gallery/4.sm.jpg"/>
</div>
...