Question

这是我的代码：

.pic {
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin: auto;
  border: 2px white solid;
  box-shadow: 0px 0px 0px 1px #E0DDDD;
  transition: 1s;
}
.pic img:hover {
  width: 100%;
  height: 100%;
  transition: 1s;
  transition-timing-function: ease-in-out;
  border: 2px red solid;
}
.pic img {
  transition: 1s;
}

<div class="pic">
  <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro">
</div>

为什么转换在我的代码中不起作用以及可以采取哪些措施来解决这个问题？

Answer 1

您的代码存在一些问题：

您尚未定义要转换的内容。你刚才说transition:1s;，告诉浏览器......什么都没有。如果你想改变图像的不透明度，你可以写transition:opacity 1s;。
将过渡代码放在无法运行转场的元素。然后，只需更改要转换的属性，浏览器将完成剩下的工作。

这是一个有效的演示：https://jsfiddle.net/q3nj9n54/

另外，请阅读this。

修改

@ ali-b既然我知道你想要在（宽度和高度）之间转换什么，那么它应该更容易实现。

要为多个属性设置动画，您需要在transition属性中将它们分隔开来。

此外，您定义的宽度和高度属性位于.pic元素上，不图像 - 您想要制作动画的值至关重要在正确的财产：P

根据该说明，您希望.pic 更大 150px以上150px，否则转换不会发生变化 - 图像已经达到100％ 100％。

你仍然需要将转换代码放在之前悬停的图片上 - 在悬停时，您只需要更改宽度和高度。

这是宽度和高度之间过渡的另一个小提琴：https://jsfiddle.net/2j423dn5/

修改

现在我得到你想要的东西：D

我正在制作错误的元素。

这将解决您的问题：https://jsfiddle.net/2j423dn5/2/

Answer 2

您的transition代码有点偏，需要一些修改。

我不太确定您要添加实际转换的内容，因此我在img或其容器上添加了代码，以便您有一些选项。

transition CSS属性是所有transition属性，例如持续时间，属性和样式。

我也不相信Toastrackenigma的答案完全正确，因为CSS Transitions不需要任何浏览器前缀（See here on CanIUse.com）

最终，它只是一点点不正确的语法，并且转换中缺少一部分，告诉它需要运行哪些元素。

.pic {
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin: auto;
  border: 2px white solid;
  box-shadow: 0px 0px 0px 1px #E0DDDD;
  transition: 1s all ease-in-out;
  box-sizing: border-box;
}
.pic img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: 1s all ease-in-out;
}
.pic.on_pic:hover {
  border: 2px red solid;
}
.pic.on_img img:hover {
  border: 2px red solid;
}
.pic.to_size:hover {
  width: 300px;
  height: 300px;
  border: 2px red solid;
}

<div class="pic on_pic">
  <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro">
</div>

<div class="pic on_img">
  <img src="./core/image.php?userid=1&amp;dateline=1356257261" alt="VBpro" title="VBpro">
</div>

<div class="pic to_size">
  <img src="http://lorempixel.com/300/300/city/" alt="VBpro" title="VBpro">
</div>

在下面的评论中是OP的最终修复问题，但这里是其他人无需浏览大量评论。

JSFiddle

CSS过渡不起作用

2 个答案: