55

left: 0pxCSSトランジションを使用して、設定された位置の間で何かをアニメーション化し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

4

4 に答える 4

37

位置 (上、下、左、右) をアニメーション化し、CSS 変換によって要素の幅または高さを差し引くことができます。

検討：

$('.animate').on('click', function(){
  $(this).toggleClass("move");
})
     .animate {
        height: 100px;
        width: 100px;
        background-color: #c00;
        transition: all 1s ease;
        position: absolute;
        cursor: pointer;
        font: 13px/100px sans-serif;
        color: white;
        text-align: center;
      }

                               /* ↓ just to position things  */
      .animate.left   { left: 0;   top: 50%;  margin-top: -100px;}
      .animate.right  { right: 0;  top: 50%;  }
      .animate.top    { top: 0;    left: 50%; }
      .animate.bottom { bottom: 0; left: 50%; margin-left: -100px;}


      .animate.left.move {
        left: 100%; 
        transform: translate(-100%, 0);
      }

      .animate.right.move {
        right: 100%; 
        transform: translate(100%, 0);
      }

      .animate.top.move {
        top: 100%; 
        transform: translate(0, -100%);
      }

      .animate.bottom.move {
        bottom: 100%; 
        transform: translate(0, 100%);
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click to animate
<div class="animate left">left</div>
<div class="animate top">top</div>
<div class="animate bottom">bottom</div>
<div class="animate right">right</div>

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

于 2012-04-20T17:32:26.570 に答える
11

これはChromiumでうまくいきました。translate の % は、適用される要素のバウンディング ボックスのサイズを参照しているため、要素の位置を指定するために使用するプロパティを切り替えることなく、要素を右下端に完全に配置できます。

topleft {
  top: 0%;
  left: 0%;
}
bottomright {
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%,-100%);
}
于 2013-08-29T12:58:48.760 に答える
9

動的な幅を持つ要素のtransform: translateX(-100%);場合、水平方向のパーセンテージ値に対抗するために使用できます。これにより、次の 2 つの解決策が考えられます。

1. オプション: ビューポート全体で要素を移動する:

からの移行:

transform: translateX(0);

に

transform: translateX(calc(100vw - 100%));


#viewportPendulum {
  position: fixed;
  left: 0;
  top: 0;
  animation: 2s ease-in-out infinite alternate swingViewport;
  /* just for styling purposes */
  background: #c70039;
  padding: 1rem;
  color: #fff;
  font-family: sans-serif;
}

@keyframes swingViewport {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100vw - 100%));
  }
}
<div id="viewportPendulum">Viewport</div>

2.オプション：親コンテナ内の要素を移動：

からの移行:

transform: translateX(0);
left: 0;

に

left: 100%;
transform: translateX(-100%);


#parentPendulum {
  position: relative;
  display: inline-block;
  animation: 2s ease-in-out infinite alternate swingParent;
  /* just for styling purposes */
  background: #c70039;
  padding: 1rem;
  color: #fff;
  font-family: sans-serif;
}

@keyframes swingParent {
  from {
    transform: translateX(0);
    left: 0;
  }
  to {
    left: 100%;
    transform: translateX(-100%);
  }
}

.wrapper {
  padding: 2rem 0;
  margin: 2rem 15%;
  background: #eee;
}
<div class="wrapper">
  <div id="parentPendulum">Parent</div>
</div>

Codepen のデモ

注:このアプローチは、垂直方向の配置にも簡単に拡張できます。例はこちらをご覧ください。

于 2020-03-19T15:41:05.713 に答える