この質問は、divを切り替える方法についてではありません。しかし、代わりに、大きなWebアプリで可視性を切り替える方法。私のWebアプリは、Chromium（Webkit）で実行するだけで済みます。私が抱えている問題は、おそらくインフラストラクチャとベストプラクティスに関連していると思いますが、誰かがこれを経験したことがあるのではないかと思います。
私のアプリはnode-webkitで実行されます。つまり、すべてのファイルがローカルであり、読み込みが高速です。本当にきびきびと感じるために、私は可能な限りすべてのコンテンツをDOMに追加します。Javascriptでアプリを変更する状態を避けたいので、いいえ$('.view-projects').addClass('visible');。すぐに散らかってしまうので、JSの仕事ではないと感じています。
代わりに、私が選択したアプローチはこのように機能します。
// javascript sample (I actually code in CoffeeScript)
// catch all click events on elements with data-trigger attributes
app.on('view:addProject', function () {
// add a class to the root view
$('#app').addClass('view-addProject');
}):
マークアップ：
<!-- markup sample -->
<div id="app">
<div class="projects">
<div data-trigger="view:addProject"></div>
<div>etc.</div>
</div>
<div class="addProject">
etc.
</div>
</div>
ステートマシンとして使用されるCss：
app.view-addProject .addProject {
visibility: visible;
display: block;
}
私が知りたいのは、他の人がこのようなことを試したり、他のアプローチで良い経験をしたりしたかどうかです。あるいは、何かが足りない場合は、動的コンテンツに問題を抱えているように感じます。
display: -webkit-flex/-webkit-box;注：要素がなどを使用しているため、単に表示/非表示を使用することはできません。