Question

我使用

在其父级中心有一个未知宽度的div

.centered {
  left : 0px;
  right : 0px;
  margin-left : auto;
  margin-right : auto;
}

它的最终风格将是

.notCentered {
  right : 100%;
  margin-right : 20px;
}

我尝试过使用css3过渡和jquery-ui switchClass，但是当它从神奇地居中到不是时，它会一直抖动。

无论如何都可以轻松制作动画吗？我知道为什么我正在做的事情不起作用，我想避免在javascript中手动计算位置。

我的完整代码在这里

<!DOCTYPE html>
  <html>
    <head>
      <style type="text/css" media="screen">

        .container {
          position : absolute;
          width : 400px;
          height : 400px;
          background : blue;
        }

        .centered {
          position : absolute;
          left : 0px;
          right : 0px;
          margin-left : auto;
          margin-right : auto;
          width : 200px;
          height : 200px;
          background : red;
        }

        .notCentered {
          position : absolute;
          right : 100%;
          width : 200px;
          height : 200px;
          background : red;
          -webkit-transition : all 2s ease-in-out;
        }


    </style>
  </head>
  <body>
    <div class="container">
      <div class="centered" onclick="this.className = 'notCentered';"></div>
    </div>
  </body>
  </html>

Answer 1

在转换的两个状态之间，您应该声明将要更改的有效属性

需要在第一个状态中声明转换，因此它应该在类.centered中，它定义了转换的第一个状态，所以尝试改变如下：

/* initial state contaning the transition */         
.centered {
  position : absolute;
  left  : 0px;
  right : 0px;
  margin-left : auto;
  margin-right : auto;
  width : 200px;
  height : 200px;
  background : red;
  -webkit-transition : all 2s ease-in-out;
}

/* final state containing only the property that will change */
.notCentered {
  right : 100%;
}

然后添加类（不要替换）

<div class="container">
  <div class="centered" onclick="this.className += ' notCentered';"></div>
</div>

js fiddle：http://jsfiddle.net/AhvNX/

Answer 2

因此，您希望红色方块一直向其父级的内部左边缘移动，并在20px的右侧有一个边距。这样就可以了。

<!DOCTYPE html>
  <html>
    <head>
      <style type="text/css" media="screen">

        .container {
          position : absolute;
          width : 400px;
          height : 400px;
          background : blue;
        }

        .centered {
          position : absolute;
          left : 100px;
          right : 0px;
          width : 200px;
          height : 200px;
          background : red;
        }

        .notCentered {
          position : absolute;
          left : 0;
          margin-right: 20px;
          width : 200px;
          height : 200px;
           background : red;
          -webkit-transition : all 2s ease-in-out;
        }


    </style>
  </head>
  <body>
    <div class="container">
      <div class="centered" onclick="this.className = 'notCentered';"></div>
    </div>
  </body>
  </html>

Answer 3

我想，你试图从右到左移动块。在这里使用jQuery动画效果。您将看到此处发生的转变。

为您的块提供ID

<div class="centered" id="block">

<script type="text/javascript">
 $(document).ready(function(){
     $("#block").animate({right : '400px',},5000);  
 });
</script>

因为right:100%表示400px（父容器的宽度）

为中心div设置动画

3 个答案: