css - CSS 过渡：向右移动

Question

我必须制作一个响应式网站，并且当我将浏览器缩小到指定大小时，我希望左侧的徽标向右移动，使其位于中心。

这是我想要实现的过渡的示例。它位于“2.Animating your transitions”框1下

我知道过渡是在悬停时开始的，但是在调整浏览器大小时是否可以激活它？或任何替代方法？

Answer 1

您可以通过混合使用 CSS3 过渡和 @media 查询来做到这一点。

div
{
  height: 100px;
  width: 200px;
  position: relative;
  background-color: #eee;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

@media all and (min-width: 400px) {
  div
  {
    background-color: #fc3;
    left: 100px;
  }
}

这样做是在元素上设置具有相对位置的过渡，但显然不会触发它们（因为没有 :hover 或其他选择器），并left: 100px;在浏览器宽度超过 400 像素时声明位置（ ）的变化。用于max-width“超过”值。

显然，您需要将值更改为您需要的值，但应该这样做。

http://jsfiddle.net/AvhvD/

Answer 2

这是我会怎么做：

1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: @media (...) { 
  .logo {
    margin-left: 0;
  }
}

Answer 3

我在想你可以在 JavaScript 和 Jquery 中做一个条件语句来测试以下是否为真：如果浏览器窗口被调整大小并且浏览器窗口的大小在一个范围之间，添加一个 css 类。如果不删除 css 类。

创建了这个新类后，也许您可​​以使用 CSS3 制作动画。如果这可行，我不太熟悉，但你总是可以恢复到 JQuery。

此外，我不知道是否可以在媒体查询中应用过渡。如果是这样，我是一个大支持者，强烈建议使用它们。

希望我能帮上忙。