如何使媒体查询来回平滑过渡？

Question

我整天都在用这个挖掘，但无法使其正常工作。我不是编码员，所以也许这就是问题所在。无论如何，我正在尝试让我的徽标在屏幕尺寸发生变化时显示得很好。我意识到我不能用 display:none;至 display:block；所以我尝试了可见性、不透明度和高度过渡。

如果您查看下面的这段代码，您会发现当从大屏幕变为小屏幕时，在淡出之前会出现某种延迟，然后播放高度动画。但是，如果您从较小的 window 变大，它的转换速度会快 2 倍。我不确定如何让它反转，所以动画来回流畅。我尝试使用网络上的大量片段进行播放，但无法让我正确控制动画。

我的想法是在移动设备上隐藏徽标，但是当人们翻转平板电脑时，一个很好的过渡会让徽标出现在更大的屏幕上（不仅是移动设备，只需重新调整桌面浏览器的大小就会让它看起来更专业).希望能帮到你。

.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>

Answer 1

您需要在两端进行过渡，而您的过渡值无效：

.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;
    }   
}

Answer 2

好的，经过一番研究和研究，终于成功了。一旦我学会了控制两侧都有延迟的动画，它就变得更容易了。

.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 和 Rémi Breton 回答： CSS transition shorthand with multiple properties?

希望这对其他人也有用！

如何使媒体查询来回平滑过渡？

How to make smooth media-query transition back and forth?

media-queries

transition

css-animations