Question

我一整天都在挖这个并且不能让它正常工作。我不是编码员，所以也许这就是问题所在。无论如何，当屏幕尺寸发生变化时，我试图使我的徽标显示得很好。我意识到我不能用display：none;显示：块;所以我尝试了可见度，不透明度和高度过渡。

如果您查看下面的代码，您会发现当从较大的屏幕变为较小的屏幕时，在淡出之前会出现一些延迟，然后播放高度动画。但是，如果从较小的窗口转到较大的窗口，它的转换速度会快2倍。我不确定如何让它反转，所以动画来回平稳。我尝试使用网上的大量片段，但没有什么可以让我正确控制动画。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您需要在两端进行转换，并且转换值无效：

    <integration:chain input-channel="queeChannel" >
        <integration:header-enricher>
                <integration:header name="myheader" ref="myBean" method="myMethod"></integration:header>
        </integration:header-enricher>
        <integration:recipient-list-router
            apply-sequence="true">
            <integration:recipient channel="mqChannel"/>
        </integration:recipient-list-router>
    </integration:chain>

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>

Thanx以下内容： http://www.greywyvern.com/?post=337 和雷米布雷顿回答： CSS transition shorthand with multiple properties?

希望这对其他人也有用！

如何进行流畅的媒体查询来回转换？

2 个答案: