Question

前端开发人员几乎没有办法，只能使用transform: translateY(-50%)和top: 50%来垂直居中可变高度的元素。我这样做是为了幻灯片放映我希望能够放大的图像。我一直试图使用transform: scale(x)设置动画，但当然，应用于元素的任何变换值都会覆盖之前的任何其他变换值。因此，要在运行transform: translateY(-50%)的同时保留animate( transform: 'scale(2.5)' )值，请改为运行animate( transform: 'translateY(-50%) scale(2.5)' )。然而，在所有情况下，我都注意到了同样奇怪的结果。第一次触发动画时，它只是将转换值重置为空，然后在后续运行中，它会打开和关闭以下转换值：

第一个州：

-webkit-transform: translate(0px, -50px) rotate(0rad) skewX(0rad) scale(1, 1);

第二州：

-webkit-transform: translate(0px, -125px) rotate(0rad) skewX(0rad) scale(2.5, 2.5);

在明确的事情是我的重置translateY值以某种方式被重新解释为像素，然后乘以与比例相同的因子。

这是代码。对于更多的内容，幻灯片显示有一个可拖动的属性，我正在开启和关闭以启用缩放，因为我认为让它们同时工作对于UX来说会很糟糕。

$('.activate-zoom').click (e) ->
  if $('.slideshow-products').slick('slickGetOption', 'draggable')
    $('.slideshow-products').slick('slickSetOption', 'draggable', false).slick('slickSetOption', 'swipe', false)
    $('.products .slick-active img').animate( 'transform': 'scale(2.5) translateY(-50%)')
  else
    $('.slideshow-products').slick('slickSetOption', 'draggable', true).slick('slickSetOption', 'swipe', true)
    $('.products .slick-active img').animate( 'transform': 'scale(1) translateY(-50%)' )

我该怎么做才能防止图像首先重新设置其translateY值，保持垂直居中，然后在给定y轴基线的情况下进行缩放。

在使用translateY定位的元素上使用css transform scale

0 个答案: