animation：ある位置から別の位置に要素を移動する

Question

私は素晴らしい視覚効果を得ようとしているので、ユーザは待機中のリストに要素が追加されたことを実際に見ることができます。

iMovieのようないくつかのアプリケーションで美しいApple OSのエフェクトからムービーに移動したときに、ビデオの履歴とライブラリを交換するとdiv要素から単純な動きをしようとしています...しかし、これは少し難しかった。

質問質問があれば誰でも簡単でより良い方法で同じことをするライブラリを知っていますか？私の考えがとてもスムーズ.hero-unitのdivを縮小し、それが好きで作るあるhttp://jsbin.com/efihax/edit

：

http://jsbin.com/efihax

編集リンク：私は5分で達成できるもの

このでしたそれはに追加されました。

この最初の5分後、無限にコードを書き始めるとこれがうまくいくことがわかりました。animate呼び出し...いい方法ではありません。

他の方法はありますか？ CCS3トランジション/アニメーションについて考えたが、私はそれはそれに慣れ、まだ私はこれを行うことができますかわからないじゃない...

私はanimate

で達成しようとしているものを表示する画像

Answer 1

あなたのコードを持ついくつかの問題：

• fadeOutコールバックがフェードアウトされている各要素に1回呼び出されます。コールバックをドロップして、タイムアウトを設定して、残りのコードの実行を1回だけ開始するように、アニメーションが終了するタイミングを調整すると、コードがよりスムーズに実行される可能性があります。

• position: absoluteを設定しましたが、要素のサイズと位置はDOM位置から引き出されます。これらのプロパティをアニメーション化するとジャンプします。

  はタイムアウトでは、スタートのプロパティを設定してみてください：
  は

  orig 
      .css({ 
       'position':'absolute', 
       'width':orig.width(), 
       'height':orig.height(), 
       'left':orig.position().left, 
       'top':orig.position().top 
      }); 
  
      orig.empty(); 
  

• あなたの要素は、現在、そのmarginの.waitList .labelの下に表示され、そしてそれは、そのpaddingの1x1のPXより大きく表示されます。これらもアニメーション化してみてください。

My edit of your code

更新

私は複合スタイルは非常によくアニメーション化していないことに気づきました。滑らかな遷移を得るには、marginではなく、margin-topとmargin-bottomを個別にアニメートし、すべてのアニメーションをpaddingという4つのアニメーションでアニメーション化したいとします。 O）thxs：私たちは何かを「ブラインド」にいるとき

My updated code

Answer 2

問題は、コンテナをアニメーション化しないことです。アニメーション化された要素を「コンテナ」に変更するだけで、アイテムは完全に消えてしまいました。しばらくの間それを働かせればうまくいくでしょう。