Как сделать этот переход div более плавным (поскольку CSS-переходы не работают) - PullRequest
Новая
       7

Как сделать этот переход div более плавным (поскольку CSS-переходы не работают)

0 голосов
/ 06 июня 2018

Вот страница в действии, как вы можете видеть, мои входные данные красиво исчезают при использовании jquery, но, несмотря на то, что я пытаюсь, я не могу добиться того, чтобы белый div сжимался плавно, в отличие от привязки: 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>

Цель состоит в том, чтобы заставить белое поле плавно сжиматься при нажатии кнопки, в то время как элементы внутри также выполняют свою анимацию, в идеале заканчивая одновременно,CSS-переходы на белом div, кажется, не работают (я думаю, это потому, что CSS на блоке фактически не меняется, он просто реагирует на изменение содержимого).

Заранее спасибо, Джейк Уилкокс

1 Ответ

0 голосов
/ 06 июня 2018

Свойство CSS перехода занимает больше, чем просто длительность.

Если вы хотите уменьшить center-box при использовании перехода, вам нужно выбрать свойство, к которому оно будет применено.

Итак, вы хотите использовать его следующим образом: 

transition: height 2s;

И вам также нужно изменить свойство height center-box на 0, когда пользователь нажимает кнопку «Продолжить»,

...