CSS 过渡：向右移动答案

【问题标题】：CSS Transitions: move to the rightCSS 过渡：向右移动
【发布时间】：2013-01-08 08:02:39
【问题描述】：

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

这是我想要实现的transition 的示例。它在“2.Animating your transitions”框1下

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

【问题讨论】：

为什么要过渡。浏览器调整大小的唯一原因是屏幕（视口）调整大小。我的意思是：没有人会手动“调整”其浏览器的大小，除非您正在调试自己的网站或在其他网站上观看魔术以检查该网站是否响应。当普通用户发生像您这样的情况时，您没有其他理由可以想到。那么，为什么要在你的代码中为 0.5% 的设计师添加无用的 CSS 并希望检查它是否是响应式的呢？但是，只是为了支持你的问题。你已经尝试过什么？
你的意思是你想让这个标志的位置在中心？为什么不使用margin-left:auto; 和margin-right:auto;
Lol 好点 Jelmer，太得意忘形了，因为我是响应式设计或网页设计的新手。还有@gamehelp16，谢谢你也很有帮助！
@Jelmer：这可能很有用，当您调整浏览器大小时看看 YouTube 的新布局，视频元素很好地向左滑动，靠在浏览器窗口的左侧。这比只是捕捉更令人愉悦的效果：D
@KyleSevenoaks 这可能很有用。在哪个用例中？为什么有人会调整它的浏览器窗口？如果他这样做了，谁在乎滑动或折断？我认为您添加了太多不必要的 CSS。附言。你为什么要重新定位标志呢？左边的 logo 是最常用的，研究表明它是最好的位置，因为 F 阅读模式。右边是可以做的，但是我不推荐，因为你要改变网站的一个核心设计主题。我认为您应该将徽标放在同一位置，以获得一致且可识别的用户体验。

标签： css html animation responsive-design transition

【解决方案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/

【讨论】：

【解决方案2】：

我会这样做：

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

【讨论】：

我明白了！这就是我想知道的。干杯:)

【解决方案3】：

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

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

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

希望我能帮上忙。

【讨论】：