web-dev-qa-db-ja.com

左->右と上->下の位置の間のCSS遷移

CSSトランジションを使用して、left: 0pxからright: 0pxに設定された位置の間で何かをアニメーション化して、画面全体に表示することは可能ですか？同じことを上から下に達成する必要があります。画面の幅/オブジェクトサイズの計算にこだわっていますか？

#nav {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 50px;
    -webkit-transition: all 0.5s ease-out;
}

.moveto {
    top: 0px;
    right: 0px;
}

そしてjQueryの.addClassを使用します

css3css-transitions
41
grep

アニメーション要素の幅/高さがわかっている場合は、位置（上、下、左、右）をアニメートしてから、対応するマージンを差し引くことができます。

_​.animate {
  height: 100px;
  width: 100px;
  background-color: #c00;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  left: 0; /*or bottom, top, right*/
}
_

そして、位置に応じてアニメーション化します...

_.animate.move {
  left: 100%;   /*or bottom, top, right*/
  margin-left: -100px; /*or bottom, top, right */
}
_

この実装はおそらくtransform: translate(x,y)でよりスムーズになりますが、より理解しやすいようにこのように保ちます。

デモ： http://jsfiddle.net/nKtC6/

25
methodofaction

これはChromiumでうまくいきました。変換の％は、適用される要素の境界ボックスのサイズを参照するため、要素を右下のEdgeに完全に取得し、位置の指定に使用するプロパティを切り替える必要はありません。

topleft {
  top: 0%;
  left: 0%;
}
bottomright {
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%,-100%);
}
11
teknotus

最新のブラウザ（IE 10+を含む）で calc() を使用できるようになりました：

.moveto {
  top: 0px;
  left: calc(100% - 50px);
}
3
candu