Блог

У меня есть веб-часть SPFx с анимацией, созданной на JavaScript, где я создаю слайдер для запуска изображений слева направо, созданный с помощью JS, так как я динамически получаю изображения и продолжительность и вычисляю их на ходу.

Все идет отлично, но проблема в том, что скорость анимации не одинакова для всех компьютеров, некоторые делают ее быстрее, некоторые медленнее, а некоторые дают разные результаты с помощью F5 или CTRL F5

Если это уместно, у нас здесь 182 изображения, на которых запущено

мой код CSS

  .gallerySlider{
      width: 100%;
      overflow: hidden;
      display: flex;
      column-gap: 30px;
      position: absolute;
      top: 0;
      transition: left linear;

      transform: translateZ(0);
      will-change: transform;
      

      img {
        height: 100%;
      }
 

язык JavaScript

   let imgz = document.querySelectorAll(`.${styles.autoGallery} img`);
  let g = document.querySelector(`.${styles.gallerySlider}`) as HTMLElement;
  let totalWidth = imgz.length * 30
  imgz.forEach(im => totalWidth  = (im as HTMLElement).offsetWidth)
  g.style.width = totalWidth   "px"



  let gAnim = ()=>{

    let base = (g.parentElement.offsetWidth   200)*-1
    let delta = g.parentElement.offsetWidth   200   g.offsetWidth   200

    let animVals = [
      //{ left: ( g.parentElement.offsetWidth   200 )   'px', },
      //{ left: "-"  ( g.offsetWidth   200 )   'px',}
      
      { transform: `translateX( -${g.parentElement.offsetWidth   200}px )` }, // 0%
      { transform: `translateX( ${base   (delta*0.2)}px )` }, // 20%
      { transform: `translateX( ${base   (delta*0.4)}px )` }, // 40%
      { transform: `translateX( ${base   (delta*0.6)}px )` }, // 60%
      { transform: `translateX( ${base   (delta*0.8)}px )` }, // 80%
      { transform: `translateX( ${g.offsetWidth   200}px )` }  // 100%
    ]
    let animCong = {
      duration:this.properties.animTime*1000,
      iterations: Infinity,
      delay:this.properties.interval*1000,
      easing:"linear"
    }
    this.animation = g.animate(animVals, animCong );
    console.log("gAnim", animVals, animCong);
    window['cancelGAnim'] = ()=>{ this.animation.cancel() }
  };

  if (this.animation) {
    if (this.modalOpen == false) {
      console.log("play from startAutomation, this.modalOpen", this.modalOpen);
      this.animation.play();
    }
  } else {
    console.log("AutoGalleryWebPart  gAnim");
    //setTimeout(()=>gAnim(),1000)
    gAnim()
  }