代码之家 › 专栏 › 技术社区 › Jake Wilcox

如何使这个div转换更平滑(因为css转换似乎不起作用)

css-animations css html

Jake Wilcox · 技术社区 · 6 年前

这是一个正在运行的页面,如您所见,我的输入使用jquery可以很好地衰减,但无论我尝试什么,我似乎都无法让white div以与snapping相同的平滑方式收缩: https://gyazo.com/983cc12230530459ea7c19c5484c53db

代码如下:

.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实际上没有改变,只是反应内容发生变化)。

提前谢谢你, 杰克威尔考克斯

1 回复 | 直到 6 年前

nsayer 6 年前

转换css属性需要的时间不仅仅是一个持续时间。

如果你想要 center-box 若要在使用转换时收缩,需要选择要应用转换的属性。

所以你想这样使用它:

transition: height 2s;

你还需要改变 height 性质 中心盒 到 0 当用户单击“继续”按钮时。