2

我想做打开两个（顶部和底部）“百叶窗”的动画，后面我想显示一些数据（例如数字）。

我正在使用z-index，因为我希望在窗帘打开之前这个窗帘后面的数字（打开百叶窗）就在那里。

动画需要是上条纹会收缩到上边缘，下条纹会收缩到下边缘。收缩应该是可见的，因为使每个条带的高度降低 - 所以从 13px 的原始高度到 0px。同时upper 的stripe CSStop属性应该是+=1px，lower 的stripetop应该是-=1px，以模仿它们正在打开。

现在我将每个条纹height从原始值设置为 0px 有问题（其中只有一个是“打开”）。而且我不知道如何同时更改它们的top属性。

在动画时间中间时，它应该如下所示：

在此处输入图像描述

CSS和HTML 

#wrapper {
  width: 100px;
  height: 30px;
  border: 2px solid black;
  position: relative;
  top: 50px;
  z-index: 2;
}
.stripe {
  position: relative;
  width: 98px;
  height: 13px;
  background: green;
  z-index: 1;
  border: 1px solid red;
  transition: height 500ms ease-in-out;
}
.stripe:hover {
  height: 0;
}
#money {
  position: relative;
  top: -25px;
  width: 90%;
  display: block;
  margin: 0 auto;
  z-index: 0;
  text-align: center;
}
<div id="wrapper">
  <div class="stripe"></div>
  <div class="stripe"></div>
  <input type="text" id="money" value="1200">
</div>

4

1 回答 1

3

你真的应该使用position:absolute这个和相对宽度和高度（百分比值）。引入了一些技巧，我认为这更接近您想要实现的目标。

#wrapper {
  width: 100px;
  height: 30px;
  border: 2px solid black;
  position: relative;
  top: 50px;
  z-index: 2;
}
.stripe {
  position: absolute;
  width: 100%;
  height: 50%;
  background: green;
  z-index: 1;
  transition: height 500ms ease-in-out;
}
.stripe:first-child {
  border-bottom: 1px solid transparent;
  top: 0;
}
.stripe + .stripe {
  border-top: 1px solid transparent;
  bottom: 0;
}

#wrapper:hover .stripe {
  height: 0;
}
#money {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 90%;
  display: block;
  margin: auto;
  z-index: 0;
  text-align: center;
  height: 1.2em;
  line-height: 1.2em;
}
<div id="wrapper">
  <div class="stripe"></div>
  <div class="stripe"></div>
  <input type="text" id="money" value="1200">
</div>

为了澄清我所说的一些技巧，我在顶部和底部百叶窗的底部和顶部（分别）使用了透明的 1px 边框；我在输入框上使用了设置的宽度和高度，margin: auto使其垂直和水平居中；我使用了<selector> + <selector>选择器（相邻的兄弟选择器）来区分任一条带（这完全符合 CSS2.1 标准，并且可以在很早之前就与浏览器兼容）。

编辑：

根据要求，将此解决方案转换为 javascript 解决方案，只需将所有出现的:hover（在这种情况下只有一个）替换为一个类（例如.hover-state）；并使用您最喜欢的 goto 事件侦听器格式切换类。在这种情况下，不需要一个以上的类。

var wrapper = document.getElementById('wrapper');

wrapper.addEventListener('mouseenter', function(){
		this.classList.toggle('hover-state');
});
#wrapper {
  width: 100px;
  height: 30px;
  border: 2px solid black;
  position: relative;
  top: 50px;
  z-index: 2;
  cursor: text;
  display: block;
}
.stripe {
  position: absolute;
  width: 100%;
  height: 50%;
  background: green;
  z-index: 1;
  transition: height 500ms ease-in-out;
}
.stripe:first-of-type {
  border-bottom: 1px solid transparent;
  top: 0;
}
.stripe + .stripe {
  border-top: 1px solid transparent;
  bottom: 0;
}

#wrapper.hover-state .stripe, input:focus ~ .stripe {
  height: 0;
}
#money {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 90%;
  display: block;
  margin: auto;
  z-index: 0;
  text-align: center;
  height: 1.2em;
  line-height: 1.2em;
  outline: none!important;
  border: none;
  background: transparent;
}
<label id="wrapper">
  <input type="text" id="money" value="1200">
  <div class="stripe"></div>
  <div class="stripe"></div>
</label>

于 2016-03-01T14:42:20.023 回答