Question

使用 flickity carousel 我在 codepen.io link 中创建了以下示例。这是我实现的CSS代码：

CSS

.image-hoover { 
  overflow: hidden;
}



.image-hoover img {
 -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition: all 10s ease;
  -moz-transition:    all 10s ease;
  -o-transition:      all 10s ease;
  -ms-transition:     all 10s ease;
  transition:         all 10s ease;
}



.image-hoover:hover img {
  -moz-transform: scale(1.06);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  -webkit-transition: all 10s linear;
  -moz-transition:    all 10s linear;
  -o-transition:      all 10s linear;
  -ms-transition:     all 10s linear;
  transition:         all 10s linear;
}

我无法弄清楚的问题是，只有在关闭此部分之前，图像才会松散响应行为：

.image-hoover img {
 -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  -webkit-transition: all 10s ease;
  -moz-transition:    all 10s ease;
  -o-transition:      all 10s ease;
  -ms-transition:     all 10s ease;
  transition:         all 10s ease;
}

但是在这种情况下，当您取消切换图像返回到它的大小非常快速地失去过渡效果时，您能否建议如何找出这个问题？

1. Here图像的响应行为存在，但缩放效果对胡佛松散过渡。

2.在this示例中，您可以注意到转换效果很好，但如果您调整窗口大小，则图像会失去响应行为。

Answer 1

之所以发生这种情况，是因为您说要转换应用于所有操作，因此当屏幕更改宽度时图像会发生变化时也会发生10s转换。

您需要更改

-webkit-transition: all 10s ease;
  -moz-transition:    all 10s ease;
  -o-transition:      all 10s ease;
  -ms-transition:     all 10s ease;
  transition:         all 10s ease;

到

-webkit-transition: -webkit-transform: 10s ease;
  -moz-transition:    -moz-transform 10s ease;
  -o-transition:      transform 10s ease;
  -ms-transition:     transform 10s ease;
  transition:         transform 10s ease;

并从：hover中删除转换。现在可以了。

小提琴 - http://codepen.io/anon/pen/eJWQRq?editors=110

旋转木马松散的响应行为与“div中的图像”放大胡佛效应

1 个答案: