图像上的 CSS 过渡不起作用

Question

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

大版本：

小版本：

我用 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/

Answer 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;
}