javascript - 在 swipe.js 中，翻译函数中的这段代码发生了什么？

Question

我试图了解 swipe.js 的工作原理，以便我可以构建自己的图像 slider 。你能帮我理解这里发生了什么吗

function translate(index, dist, speed) {

  var slide = slides[index];
  var style = slide && slide.style;

  if (!style) return;

  style.webkitTransitionDuration =
  style.MozTransitionDuration =
  style.msTransitionDuration =
  style.OTransitionDuration =
  style.transitionDuration = speed + 'ms';

  style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
  style.msTransform =
  style.MozTransform =
  style.OTransform = 'translateX(' + dist + 'px)';

}

链接到 swipe.js

Answer 1

function translate(index, dist, speed) {
  // Get the slide by index
  var slide = slides[index];

  // Get the style that is assigned to the slide.  If no slide was found
  // this will return false.
  var style = slide && slide.style;

  // If there was no style found, return (do nothing)
  if (!style) return;

  // In Javascript, you can assign multiple variables at once.  For example,
  // "var a = b = c = 10;".  That would assign all 3 variables to 10.  In the
  // code below, it assigns a transition for each custom browser (since each
  // browser has a custom attribute that it uses).  msTransitionDuration is
  // for Microsoft (IE), webkit for Chrome, Moz for Firefox, etc.  It assigns
  // each of them to be "<speed>ms", speed being a variable passed into the
  // function.  It looks strange because each variable is on it's own line,
  // but you can imagine it like the example I provided above.
  style.webkitTransitionDuration =
  style.MozTransitionDuration =
  style.msTransitionDuration =
  style.OTransitionDuration =
  style.transitionDuration = speed + 'ms';

  // Now, assign the transform methods.  Chrome uses a different format, so
  // it gets it's own string.  ms, Moz, and O are the same, so they are
  // assigned in a similar style to the block above.
  style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
  style.msTransform =
  style.MozTransform =
  style.OTransform = 'translateX(' + dist + 'px)';
}