Question

这是正在运行的页面，正如你所看到的，我的输入使用jquery很好地淡出但是无论我尝试什么我似乎都无法让白色div以平滑的方式缩小，因为它被贴上了对齐：{{3 }}

以下代码：

.logo-margins {
        margin: auto!important;
        margin-bottom: 20px!important;
        display: block!important;
        padding-left: 28px;
      }
    
      .copyright-text {
        font-size: 12px;
      }
    
      .step-one-object {
        display: block;
      }
    
      .step-two-object {
        display: none;
      }
    
      .center-box {
        background: #fbfbfb;
        transition: 2s;
        padding: 20px;
        border-radius: 15px;
      }
    
      .center-box2 {
        height: 302px!important;
      }

    	<body style="background-color: #0155a4">
    		<div class="container">
    			<div class="col-md-12">
    				<img class="logo-margins" style="width:500px" src=“">
    			</div>
    			<div class="col-md-12">
    				<form class="form-signin" autocomplete="off">
    					<div class="center-box">
    						<div class="text-center mb-4 step-one-object">
    							<p><br />Welcome to the Survey Centre. <br /><br /> To get started, enter the 'Company ID' 
    								issued to you by your local representative, You can also find this ID on the front page of any report created for you by representative</p>
    						</div>
    			
    						<div class="form-label-group">
    							<input type="text" id="inputCompanyId" class="form-control" placeholder="Email address" required autofocus>
    							<label for="inputCompanyId">Company ID</label>
    						</div>
    			
    						<div class="form-label-group step-two-object" id="passwordField">
    							<input type="password" id="inputPassword" class="form-control" placeholder="Password">
    							<label for="inputPassword">Password</label>
    						</div>
    			
    						<button class="btn btn-lg btn-primary btn-block step-one-object" onclick="advanceStep(event)">Continue</button>
    						<button class="btn btn-lg btn-primary btn-block step-two-object">Sign In</button>
    						<p class="mt-5 mb-3 text-muted text-center copyright-text">&copy; Copyright 2018, Intellectual Property </p>
    					</div>
    				</form>
    			</div>
    		</div>
    
    		<script>
    			function advanceStep(event) {
    				event.preventDefault();
    				$(".step-one-object").fadeOut(300);
    				$(".step-two-object").delay(305).fadeIn(300);
    				
    			}
    		</script>
    	</body>

目标是在点击按钮时让白框平滑收缩，同时里面的元素也可以完成动画，理想情况下同时完成，白色div上的CSS转换似乎不起作用（我认为这是因为盒子上的CSS实际上并没有改变，它只是对内容的变化做出反应。）

提前致谢，杰克威尔科克斯

Answer 1

转换CSS属性不仅需要持续时间。

如果您希望center-box在转换时缩小，则需要选择要应用它的属性。

所以你想要的就是像这样使用它：

transition: height 2s;

当用户点击“继续”时，您还需要将height的{{1}}属性更改为center-box。按钮。

如何使这个div转换更顺畅（因为CSS转换似乎不起作用）

1 个答案: