如何进行平滑的媒体查询来回转换？
Posted
技术标签:
【中文标题】如何进行平滑的媒体查询来回转换？【英文标题】：How to make smooth media-query transition back and forth? 【发布时间】：2015-08-13 14:50:40 【问题描述】：我整天都在挖掘它，但无法使其正常工作。我不是编码员，所以也许这就是问题所在。无论如何，当屏幕尺寸发生变化时，我试图让我的标志看起来很好。我意识到我不能用 display:none;显示：块；所以我尝试了可见性、不透明度和高度过渡。
如果您查看下面的这段代码，您会发现当从大屏幕变为小屏幕时，在淡出之前会出现某种延迟，然后播放高度动画。但是，如果您从较小的窗口转到较大的窗口，它的转换速度会快 2 倍。我不知道如何让它反转，所以动画来回流畅。我尝试从网络上玩许多 sn-ps，但没有什么能让我正确控制动画。
我的想法是在移动设备上隐藏徽标，但是当人们翻转平板电脑时，一个不错的过渡会让徽标出现在更大的屏幕上（不仅是移动设备，只需重新调整桌面浏览器的大小会使其看起来更专业）。希望你能帮忙。
.wrapper
width: 500px;
background-color: #0C6;
.nav
background-color: #69C;
.logo
max-height: 0px;
background-color: #FC3;
-moz-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
visibility: hidden;
opacity: 0;
@media screen and (min-width: 500px)
.logo
max-height: 200px;
visibility: visible;
opacity: 1;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="logo">logo<br>
<br>
<br>
<br>
</div>
<div class="nav">nav</div>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：好吧，在玩了一会和研究了一下之后，它终于成功了。一旦我学会了用两边的延迟来控制动画，它就变得更容易了。
.wrapper
width: 500px;
background-color: #0C6;
.nav
background-color: #69C;
.logo
height: 0px;
background-color: #FC3;
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
-moz-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
-o-transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
transition: visibility 0.5s linear, opacity 0.5s linear, height 0.5s linear 0.8s;
@media screen and (min-width: 500px)
.logo
height: 100px;
visibility: visible;
opacity: 1;
-webkit-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
-moz-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
-o-transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
transition: height 0.5s linear 0.3s, visibility 0.5s linear 0s, opacity 0.5s linear 1s;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="logo">logo<br>
<br>
<br>
<br>
</div>
<div class="nav">nav</div>
</div>
</body>
</html>感谢以下内容： http://www.greywyvern.com/?post=337 和雷米布雷顿回答： CSS transition shorthand with multiple properties?
希望这对其他人也有用！
【讨论】：
【参考方案2】：两端都需要transition，你的transition值无效：
.logo
max-height: 0px;
background-color: #FC3;
-webkit-transition: max-height 1s linear, opacity 1s linear;
-moz-transition: max-height 1s linear, opacity 1s linear;
-o-transition: max-height 1s linear, opacity 1s linear;
transition: max-height 1s linear, opacity 1s linear;
visibility: hidden;
opacity: 0;
@media screen and (min-width: 500px)
.logo
max-height: 200px;
visibility: visible;
opacity: 1;
-webkit-transition: max-height 1s linear, opacity 1s linear;
-moz-transition: max-height 1s linear, opacity 1s linear;
-o-transition: max-height 1s linear, opacity 1s linear;
transition: max-height 1s linear, opacity 1s linear;
【讨论】：
thanx Kevin，但似乎如果我从宽视图转到移动视图，徽标会消失，没有任何不透明度过渡，而且还有延迟。以上是关于如何进行平滑的媒体查询来回转换？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用最大宽度的媒体查询：767px 首先使用 Bootstrap 4 移动设备
我应该在移动键盘上方使用媒体查询和转换： translateY(-%) 吗？