图像上的 CSS 过渡不起作用

Posted 2023-05-09

【中文标题】图像上的 CSS 过渡不起作用

【英文标题】：CSS Transition on image not working

【发布时间】：2015-02-08 12:41:53

【问题描述】：

在我的网站顶部我有一个画廊，当您向下滚动页面时，我希望画廊以较小的版本显示。

大版本：

小版本：

我用 jQuery 制作了这个，当你滚动 300 像素（画廊初始高度）时，你会得到大约 100 像素高度的小的一个。

我已经设置了一些过渡：

首字母：

#gallery 
  overflow: hidden;
  width: 100%;
  height: 305px;
  white-space: nowrap;
  vertical-align: middle;
  display: inline-block;
  background-color:white;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;

#gallery img 
  height: 300px;
  width: auto;
  padding: 2px;
  vertical-align: middle;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;

滚动：

#fixed_gallery 
  overflow: hidden !important;
  width: 100% !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  display: inline-block !important;
  position: fixed !important;
  z-index: 53 !important;
  height: 100px !important;
  background-color:white;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;


#fixed_gallery img 
  height: 95px !important;
  width: auto !important;
  padding: 2px !important;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;

我有相同的导航箭头代码，它们确实会随着过渡而缩放。我有点迷失了这个：\！

如何让这种过渡发挥作用？所以当画廊变成小版本时，我希望图像变小并有一个很好的过渡。

参考网址：http://ehad.mediaheads.nl/blog/ & http://jsfiddle.net/fzjqyhcw/

【参考方案1】：

图像上的 css 过渡不起作用，因为您实际上并未调整图像大小。

尝试添加一个类（而不是切换父级的 id），以便您可以执行以下操作：

#gallery 
   ...
   position: relative;


#gallery img 
   ...
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;


#gallery.fixed-gallery 
   ....
   position: fixed;


#gallery.fixed-gallery img 
   ....
   height: 95px;

【讨论】：

确实如此，如果您发布当前结果的 jsFiddle 示例，我可能会帮助您。

我认为这是因为图像嵌套在 div 中，并且在切换位置或其他东西时再次加载，可能是这种情况吗？我该如何解决这个问题？

不知道为什么，但是如果#gallery 有一个display: inline-block; 则它不起作用，请参阅jsfiddle.net/fzjqyhcw/3

好人！它确实有效。还好显示器什么都没做哈哈，把它作为答案，这样我就可以投票给你了。