CSS过渡方向上下

Question

我正在为网站制作地铁图块菜单，我不能使用任何 JavaScript，只有 html 和 css。

问题出在滑动方块和滑动方向上，此外当下一个方块滑动隐藏在下方时。

#block4 - 向下
#block5 - UP.

#block4:hover {
 position: absolute;
  z-index: 2;
  background: rgba(150,150,150,0.95);
  width: 100%;
  height: 50px;
  overflow:hidden;
  transition: height 450ms;
  -moz-transition: height 450ms;
  -webkit-transition: height 450ms;
     height: 300px;
     z-index: 2;
}
#block5:hover {
 position: absolute;
  z-index: 2;
  background: rgba(150,150,150,0.95);
  width: 100%;
  height: 50px;
  overflow:hidden;
  transition: height 450ms;
  -moz-transition: height 450ms;
  -webkit-transition: height 450ms;
     height: 300px;
     z-index: 2;

JSFiddle 上的示例 - https://jsfiddle.net/werk13/7tza9yqq/

Answer 1

如果您希望块#3 浮动，您不能 "change" 它周围的其他元素，因为浏览器将 "reposition" 所有元素根据您所做的任何更改。

既然你说你不能在代码中使用任何 JS - 我看到你有几种方法可以处理它： 1. 使元素固定位置。这样，当您将鼠标悬停在其他元素上（并更改它们自己的样式）时，元素的 none 会发生变化。 2. 使用 "hidden" 个元素。创建与#block4 完全相同的新元素 - 我们将调用 id #block4dup - 相同的内容，相同的位置 - 一切都相同。它将有一个绝对位置和不透明度：0。你想要的 :hover 将在#block4dup:hover 上，这将改变 opacity/height 和你需要的一切。此元素也将定位为绝对，因此不会影响该页面上的其他浮动元素。

不是很好的解决方案（很多重复的内容），但由于您不能在此处使用任何 JS，它们都可以工作并给您 "good" 结果。

Answer 2

勾选this。

.slider {
    overflow-y: hidden;
    max-height: 500px; /* approximate max height */

    transition-property: all; // this dude
    transition-duration: .5s; // this dude
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); // this
}

另一个Demo.

#toggle + label {
  position:absolute;
  cursor:pointer;
  padding:10px;
  background: #26ae90;
  width: 100px;
  border-radius: 3px;
  padding: 8px 10px;
  color: #FFF;
  line-height:20px;
  font-size:12px;
  text-align:center;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  margin:20px 50px;
  transition:all 500ms ease; // right here
}
#toggle + label:after {
  content:"Open" 
}

.container {
  transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94); // right here
  padding:5em 3em;
}

CSS过渡方向上下

CSS transition direction up and down

html

css

css-transitions