2

2 つ (上と下) の「シャッター」を開くアニメーションを実行したいのですが、その背後にいくつかのデータ (数値など) を表示したいと考えています。

z-indexカーテンが開く前に、このカーテンの後ろの番号 (シャッターを開く) を表示したいので、 を使用しています。

アニメーションでは、上部のストライプが上端に縮小し、下部のストライプが下端に縮小する必要があります。縮小は、各ストリップの高さを低くすると表示されるはずです。つまり、元の高さ 13px から 0px になります。同時に、上部のストライプ CSStop属性は +=1px で、下部のストライプtopは -=1px にして、開いていることを模倣します。

今のところ、各ストライプheightを元の値から 0px にすることに問題があります (そのうちの 1 つだけが「オープニング」です)。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>

いくつかのトリックの意味を明確にするために、上部シャッターと下部シャッターの下部と上部に透明な 1 ピクセルの境界線を (それぞれ) 使用しました。入力ボックスの幅と高さを設定しmargin: autoて、垂直方向と水平方向の両方で中央揃えにしました。また、セレクター (隣接する兄弟セレクター) を使用して、<selector> + <selector>いずれかのストライプを区別しました (これは完全に CSS2.1 に準拠しており、ブラウザーの互換性のためにかなり前から動作します)。

編集：

要求に応じて、このソリューションを JavaScript のソリューションに変換するには、出現するすべての:hover(この状況では 1 つだけ) をクラス (例: .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 に答える