CSS翻译转换延迟在Chrome中的鼠标移动[关闭]答案

【问题标题】：CSS translate transition delayed on mousemove in Chrome [closed]CSS翻译转换延迟在Chrome中的鼠标移动[关闭]
【发布时间】：2016-02-28 13:41:18
【问题描述】：

我有这个动画，我希望图像根据鼠标在图像上的位置进行缩放和平移。

这适用于 Chrome 和 Safari，但在 Chrome 中，它会等待鼠标停止移动，然后再应用过渡 http://codepen.io/mhkeller/pen/ZbdGQb

如果我删除 400ms 过渡时间，过渡会在 Chrome 中的 mousemove 上正确更新 http://codepen.io/mhkeller/pen/GpbJrY

如果可能，我想保留过渡。我尝试添加backface-visibility: hidden; 和translate3d(0,0,0) 技巧，但它似乎不起作用。

HTML（翡翠模板）

#pages
    .page
        img(src="https://raw.githubusercontent.com/ajam/pulp/master/imgs/pages/page-3.jpg")

CSS（成为前缀的手写笔）

.page
    width 250px
    img
      width 100%
      transition transform 400ms cubic-bezier(0,0,.2,1) // This works when

function Scale(){

  function Normalizer(min, max){
    return function(val) {
      return (val - min) / (max - min);
    }
  }

  function Interpolater(min, max, clamp){
    return function(val) {
      val = min + (max - min) * val;
      return clamp ? Math.min(Math.max(val, min), max) : val;
    }
  }

  var domain = new Normalizer(0, 1);
  var range = new Interpolater(0, 1);
  var s = function(val){
    return range(domain(val));
  };
  s.domain = function(min, max){
    if (!arguments.length) return domain;
    domain = new Normalizer(min, max)
    return s
  };
  s.range = function(min, max, clamp){
    if (!arguments.length) return range;
    range = new Interpolater(min, max, clamp)
    return s
  };
  return s;

}


var settings =  {

    "desktopHoverZoomOptions": {
        "scale": 1.5, // How much you want it to zoom
        "fit": .96, // A value between 0 and 1. Defaults to 1. Set this to something around .96 if you want to cut off the edges a little bit, like in this demo. This setting is useful if you have white space around your panels
        "padding": .25 // A value between 0 and .5. Sometimes you don't want the mouse to have to reach the edge of the page to fully zoom. Setting this to something like .25 will mean you've reached the edge of the zoomed in image when you're within 25% of the page edge.
    }
}

$('#pages').on('mousemove', '.page', function(e){
    var scale_value = settings.desktopHoverZoomOptions.scale,
                fit         = settings.desktopHoverZoomOptions.fit*100,
                padding     = settings.desktopHoverZoomOptions.padding,
                $page       = $(this),
                $hover_img  = $page.find('img'),
                page_width  = $page.width(),
                page_height = $page.height(),
                adjusted_x  = e.pageX - $page.offset().left,
                adjusted_y  = e.pageY - $page.offset().top,
                x_perc      = adjusted_x / page_width,
                y_perc      = adjusted_y / page_height;

        var translate_percentage = fit*((page_width*scale_value - page_width)/2)/page_width;

        var scale =  new Scale().domain(1- padding, padding)
                                                        .range(-1*translate_percentage, translate_percentage, true);

        var scaled_x_perc = scale(x_perc),
                scaled_y_perc = scale(y_perc);

        $hover_img.css({
            'transform': 'translate('+scaled_x_perc+'%,'+scaled_y_perc+'%) scale('+scale_value+')'
        });


});

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码。尽管您提供了一个示例链接，但如果该链接失效，您的问题对于未来遇到相同问题的其他 SO 用户将毫无价值。

标签： css google-chrome css-transitions

【解决方案1】：

我通过将其更改为矩阵变换来修复它。不知道为什么会这样，但 Chrome、FF 和 Safari 都能正常显示。

$hover_img.css({
    'transform': 'matrix('+ scale_value +', 0, 0, '+ scale_value +', ' + scaled_x_perc/100*page_width + ', ' + scaled_y_perc/100*page_height + ')'
});

【讨论】：