http://11bouchardg.decmultimedia.ca/myriam_coiffure
問題は、上記のリンク先の Web サイトに関するものです。
これは、意図したとおりに機能しないコードの一部です。コメントを見てください。それらの上に問題のある行があります。
コメントで指摘したコードは、2 つの要素の高さ/幅の値 (「自動」) を現在のピクセル単位の値に置き換えることを意図しているため、後で CSS3 トランジションを行うことができます。 「auto」の値で動作します。
基本的に、私はこれで計算された値を回復します:
someVariable=window.getComputedStyle(<"my element">).getPropertyValue('<"width or height">');
次に、これを要素に適用します。
<"my element">.style.<"width or height">=someVariable;
高さは完璧に機能します。ただし、幅は幅を 0 にします...これにより、CSS3 トランジションが機能しますが、はさみが左に移動します。ページでセクションを開いて再度閉じると、これがどのように問題であるかを確認できます。(タイトルをクリックして、セクションを開いたり閉じたりします。)
計算された値を取得することが問題の場所ではないことに注意してください。メッセージの冒頭にあるペーストビンのリンクでわかるように、それらを出力するとconsole.log()期待値が得られます。
これは私が取り組んでいるウェブサイトであり、このウェブサイトだけのアーカイブ コピーではありません。したがって、回答が受け入れられた後にアクセスすると、(うまくいけば!) 問題のないページに移動します。または、いつアクセスしようとしたかによって、404 not found エラーが発生します。
編集
さて、問題があまり明確ではなかったので、問題をできるだけ分離するために 2 つの Fiddles を作成しました。そして説明図。
1 -- コンテンツあり。格納された値に従って、コンテンツの高さがどのように適切に設定されているかを確認できます。(ええ、セクションを再度開いてもコンテンツは再表示されません。ここでは関係ないので、この問題を調べる気はありません。コードの量を最小限に抑えていたときに、いくつかの重要な行を削除したに違いありません。ええ、それは私はプロポーションなどに取り組まなかったので、醜いです. ）
2 -- コンテンツなし。これは、目前の問題に直接関連するものだけを表示するためのものです。はい、CSS の量も最小限に抑えたので、さらに醜いです。トランジションが大幅に延長されているため、何が起こっているのかがよくわかります。
そして説明図。(小さなテキストを読むためにフルサイズで表示されます)。Ctrl-+ でズームインすることもできます。
