まず第一に、私はその CSS しか操作できない Web サイトに取り組んでいると言わざるを得ません。 したがって、javascript/html ソリューションを提案しないでください。
ここに私の問題があります、
このjsFiddle demoを見るとわかるように、基本的なトグル表示方法がありますが、デフォルトの CSS ではトランジション効果がありません。HTML はまさにそのようなもので、HTML や JavaScript を変更する権限がなく、CSS でしか遊べません。
このトグル メソッドに CSS 3 トランジション効果を追加したいと考えています。
この質問に対するジム・ジェファーズの答えとして、トランジション効果は決して機能しません
display: block< - > display: none
そのため、常に要素表示ブロックを保持する必要があります。
これを試してみましたが、うまくいきませんでした。
.infocontent {
-webkit-transition: opacity 1s ease-out;
}
div[style='display: block; '].infocontent {
opacity: 1; height: auto !important;
}
div[style='display: none; '].infocontent {
display:block !important; opacity: 0; height: 0px;
}
なぜ機能しないのですか？どうやってやるの？