Question

我试图在某段时间后（在所有动画结束后）强制更改属性位置。为此，我创建了示例代码集，以便您可以看到我已经实现的内容（更多）：

transition: width 0.5s ease-in, height 0.5s, position 0s ease 0.6s;

https://codepen.io/anon/pen/xpQdZm

正如您所看到的那样，悬停在绿色容器上会触发内部容器的过渡（从右到左）。我想要做的是当我们移除悬停效果时使容器减少，但是当过渡仍然持续时将位置设置为绝对，但是在所有过渡结束后将位置设置为静态。

更具说明性的例子可以在这里看到：https://codepen.io/anon/pen/VyVzed

由于当悬停丢失时位置从绝对变为静态，图像闪烁，看起来很难看。

.container {
  display: flex;
  flex-direction: row;
  width: 800px;
}

.container div {
  position: relative;
  flex: 1;
}

.container div img {
  width: 200px;
  transition: width 0.5s ease-out;
  z-index: 100;
}

.container div img:hover {
  height: 200%;
  position: absolute;
  width: 200%;
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  z-index: 200;
  transition: width 0.5s ease-out;
}

.container:nth-of-type(even) div img:hover {
  bottom: 0;
  top: auto;
}

.container div:nth-of-type(even) img:hover {
  left: auto;
  right: 0;
}

<div class="container">
  <div>
    <img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
  </div>
  <div>    
    <img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
  </div>
  <div>
    <img src="http://images4.fanpop.com/image/answers/177000/177769_1287459785835_400_300.jpg">
  </div>
  <div>
    <img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
  </div>
</div>
<div class="container">
  <div>
    <img src="http://images4.fanpop.com/image/answers/177000/177769_1287459785835_400_300.jpg">
  </div>
  <div>
    <img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
  </div>
  <div>
    <img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
  </div>
  <div>    
    <img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
  </div>
</div>

我知道我可以将div设置为固定高度，但问题是我希望图像按宽度缩放。

Answer 1

而不是考虑改变位置，为什么不改变动画的工作方式。您可以尝试使用比例并调整transform-origin来决定图片应该如何移动（并优化您的标记）

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 400px;
}

.container img {
  width: 100px;
  height: 100px;
  transition: 0.5s ease-out;
  transform-origin: top left;
}

.container img:nth-child(even) {
  transform-origin: top right;
}

.container img:nth-child(2n+5) {
  transform-origin: bottom left;
}

.container img:nth-child(2n+6) {
  transform-origin: bottom right;
}

.container img:hover {
  position: relative;
  z-index: 2;
  transform: scale(2);
}

<div class="container">
  <img src="https://lorempixel.com/100/100/">
  <img src="https://lorempixel.com/150/150/">
  <img src="https://lorempixel.com/200/200/">
  <img src="https://lorempixel.com/300/300/">
  <img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
  <img src="http://1.bp.blogspot.com/-6BwaeUjaDnM/TZSPiw4YeoI/AAAAAAAAAf4/YlxYyxxu6nE/s400/2.jpg">
  <img src="https://media.giphy.com/media/pqwPJPgR6qCB2/giphy.gif">
  <img src="https://img00.deviantart.net/f0f4/i/2017/182/c/6/pvz_heroes_random_colored_doodle_of_nc_by_crystilialance-dbeqssx.png">
</div>

转换结束后修改位置

1 个答案: