CSSのアニメーション化の代わりに

短く私はborderの3つのdivのコンテナを持っています。それぞれの内部にはdivがあり、背景色は100%の幅と高さに設定されています。アイデアは、それらをクリックすると、水が上から下に空になることです。私はの内部の高さを100%から0%へと切り替えることでこれを行います。もちろん、これは水を浮上させるだけです。私は午後のほとんどを探していて、何も出てこなかった。私はちょうどそれを逆にしたり、y軸を元に戻したりする最も簡単な方法を探しています。それは難しいことではありません。CSSのアニメーション化の代わりに

とにかく、私は何をしようとしているのか、jsfiddleがCSSアニメーションを許可したいので、ここにコードペンがあります。私はまた私が正しくJavascriptが空と完全なクラスを切り替えることが書かれていると信じていますが、任意のアイデアを持っている場合にのみ、1人のように動作するように思わサイドノートで

https://codepen.io/anon/pen/NgYEKE

function func1(buttonname) { 
 
    var x = document.getElementById(buttonname).className; 
 

 
    if (x = "full") { 
 
     document.getElementById(buttonname).className = "empty"; 
 
    } else { 
 
     document.getElementById(buttonname).className = "full"; 
 
    } 
 
}

.full { 
 
    height: 100%; 
 
    transition:height 2s; 
 
} 
 

 
.empty { 
 
    height: 0%; 
 
    transition: height 2s; 
 
}

<body style="background-color:black;"> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <div id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water1" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass2" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water2" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass3" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water3" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
    </div> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <button id="button1" onclick="func1(this.innerHTML)">water1</button> 
 
     <button id="button2" onclick="func1(this.innerHTML)">water2</button> 
 
     <button id="button3" onclick="func1(this.innerHTML)">water3</button> 
 
    </div> 
 
</body>

何私はそこに間違っていても助けになるだろう。

出典

2017-07-02 Simon Green

2物事：

1）ではなくx = "full"

2のx == "full"にする必要がありif状態で。）以下のスニペットでは、top: 0px; bottom: 0; right: 0; left: 0の設定（設定なし）のabsolute配置要素の「水」のスタイルを設定し、top設定をアニメーション化/遷移させたので、常にbottomは0のままです。今度は "水"が上から空になり、下から上へ別のクリックで "補充"することもできます。

function func1(buttonname) { 
 
\t var x = document.getElementById(buttonname).className; 
 

 
\t if ((x == "full")) { 
 
\t \t document.getElementById(buttonname).className = "empty"; 
 
\t } else { 
 
\t \t document.getElementById(buttonname).className = "full"; 
 
\t } 
 
}

body { 
 
\t background-color: black; 
 
} 
 
#glass1, #glass2, #glass3 { 
 
\t position: relative; 
 
\t height: 50px; 
 
\t width: 25px; 
 
\t border: 2px solid blue; 
 
\t margin: 3px; 
 
} 
 
.full { 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t transition: all 2s; 
 
\t background-color: aqua; 
 
} 
 
.empty { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t transition: all 2s; 
 
\t background-color: aqua; 
 
}

<div style="display:flex;justify-content:center;align-content:center;"> 
 
<div id="glass1"> 
 
<div id="water1" class="full" ></div> 
 
</div> 
 
<div id="glass2"> 
 
<div id="water2" class="full" ></div> 
 
</div> 
 
<div id="glass3"> 
 
<div id="water3" class="full"></div> 
 
</div> 
 
</div> 
 
<div style="display:flex;justify-content:center;align-content:center;"> 
 
<button id="button1" onclick="func1(this.innerHTML)">water1</button> 
 
<button id="button2" onclick="func1(this.innerHTML)">water2</button> 
 
<button id="button3" onclick="func1(this.innerHTML)">water3</button> 
 
</div>

出典

2017-07-03 00:03:42 Johannes

これは最も包括的な答えであり、アニメーションもより堅牢なオプションです。唯一の欠点は、コンテナの高さを知る必要があることです。コンテナの高さが分からない場合の代替案を探している人は、Azizの投稿に記載されているScaleYオプションを調べるべきです。ただし、scaleYソリューションでは、移行が完了する前にクラスを切り替えることに問題があることに注意してください。 –

@SimonGreenあなたのコメントの後、もう一度私のスニペットを編集しました： 'top'のpx値（空の時）の代わりに' top：100％ 'を使うこともできます。コンテナの高さを知る。 – Johannes

要素の高さは、設計によって上から下に向かって変化しますが、bottom transform-originと宣言している間にscaleYの変換を使用することができます。

デモ

div { 
 
    height: 200px; 
 
    width: 50px; 
 
    border: 1px solid; 
 
} 
 

 
div div { 
 
    height: 100%; 
 
    background: blue; 
 
    transform-origin: bottom; 
 
    transition: transform 2s; 
 
} 
 

 
div div:hover { 
 
    transform: scaleY(0); 
 
}

<div> 
 
    <div></div> 
 
</div>

出典

2017-07-02 19:49:32 Aziz

を（私はまたところで、それが簡単に理解できるようにすることインラインから外部にCSSを移動し）、あなたのアジズありがとうこれは、右のトラックに私を得ました。高さを変換することに焦点を当てているように見えましたが、他の方法を探す方法だけを考えていました。両方のクラスが一度変換され、すべてが機能したらうまく動作します。 –

あなたはガラスの要素の相対的な位置と水の要素に下

.glass { 
    position: relative; 
} 

.water { 
    position: absolute; 
    bottom: 0px; 
}

からの絶対位置を適用し、このクラスを適用することができますこのような要素に：

<div class="glass" id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
    <div class="water" id="water1" class="full" style="width:100%;background-color:aqua;"></div> 
    </div>

は、エラーが、クリック機能である

if (x = "full"){

変数を代入し、比較するために==を使用する必要があります。私はこれがデモのタイプミスだと思います。

出典

2017-07-02 20:06:50 Sergio10

ありがとうセルジオ、これは私の悪いですが、私はジャバスクリプトを使用することはほとんどないので、他のプログラミングロジックを適用しようとしていました。 –

あなたが間違っている場合は、常にfullの状態を設定しています。それは完全に動作する比較に変更します。

function func1(buttonname) { 
 
    var x = document.getElementById(buttonname).className; 
 

 
    if (x == "full") { 
 
     document.getElementById(buttonname).className = "empty"; 
 
    } else { 
 
     document.getElementById(buttonname).className = "full"; 
 
    } 
 
}

.full { 
 
    height: 100%; 
 
    transition:height 2s; 
 
} 
 

 
.empty { 
 
    height: 0%; 
 
    transition: height 2s; 
 
}

<body style="background-color:black;"> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <div id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water1" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass2" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water2" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass3" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water3" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
    </div> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <button id="button1" onclick="func1(this.innerHTML)">water1</button> 
 
     <button id="button2" onclick="func1(this.innerHTML)">water2</button> 
 
     <button id="button3" onclick="func1(this.innerHTML)">water3</button> 
 
    </div> 
 
</body>

出典

2017-07-02 23:24:05

CSSのアニメーション化の代わりに

答えて

関連する問題