Jqueryを使って別のDOM要素にタグを移動し、CSS3の遷移を行います

Question

私の考えは、ウェブサイトのコンテナ領域に大きなロゴを表すdivタグを持ち、スクロールが特定の部分に移動してdivを移動するときですnavbar部分はCSS3遷移を行いますので、要素の移動は素晴らしい効果があります。

jqueryを使ってdivのidを変更し、appendToを使用してDOM内でナビゲーションに移動しました。しかし、トランジション効果は消えず、ただちにdivをナビゲーションに移動します。私が使用しているコードのjQueryのコードは、私がトランジションを追加しました

$('#logoTitle').appendTo('.navigation'); 
$('#logoTitle').attr('id','navLogo'); 

次のとおりです。すべての0.5使いやすさを。両方のidのCSSファイルには、スクロールが終わったときにロゴを元の位置に戻したいと思っています。

移行しているボットの幅や高さ、上端などを指定していないので、ここでは間違っていると思います。

私は要素をnavbarに移動するための私のアプローチは完全に間違っていると思います。私はロゴをポジションに移すことでこれを行うことができました：固定;それを配置する場所を設定します。

しかし私は解決策が私のためにうまく動作しないという特定の出来事でnavbarを隠す機能も持っているので、私はこの問題にこのアプローチをしました。しかし、アニメーションをトリガするためにこれをどのように行うべきかを理解できず、後でjqueryで後で非表示にするdomの中に要素を入れるアニメーションが実行されると、理解できません。

私はスクロールtouchmoveのイベントに精通していますが、これは私にとってこの移動とアニメーションだけの問題ではありません。

Answer 1

ほとんどの場合、このようなアニメーションの問題に対しては、特定の解決策が必要です。しかし、私が考えている最も簡単な方法は、position: fixedとtop/leftというロゴを移動することです。

正しい場所に移動したら、position: fixedロゴの背後にあるナビゲーションにロゴを表示し、position: fixedのロゴをopacity: 0に設定する必要があります。

正確に正しい場所にいる場合、実際には2つのロゴがあることは誰にも分かりません。

私はあなたが何を言いたいのか理解していただければ幸いです。