Начните CSS анимацию до того, как элемент будет виден - PullRequest
Новая
       7

Начните CSS анимацию до того, как элемент будет виден

0 голосов
/ 23 октября 2018

Я работаю над анимацией, я хочу, чтобы 4 элемента отображались как плавающие независимо друг от друга, для этого я использую одну и ту же анимацию для всех 4 элементов, но использую animation-delay, чтобы убедиться, что они плавают независимо.Проблема в том, что эти анимации происходят внутри элемента, который скрыт при загрузке страницы, и когда этот элемент становится видимым, вы можете видеть, как происходит задержка анимации.Возможно ли, чтобы анимация начиналась, пока содержащий элемент все еще скрыт, чтобы задержка не была видна?В противном случае, каков наилучший способ заставить их плавать независимо друг от друга, не слишком усложняя CSS? 

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    $('.scene.one').hide();
    $('.scene.two').fadeIn(500);
  });
});
.scenes {
  height:150px;
  width:300px;
  border:1px solid black;
}
h1 {
  margin:0;
}
p {
  margin-bottom:0;
  font-size:12px;
}
.scene {
  position:relative;
  height:100%;
  width:100%;
  text-align:center;
  display:none;
}
  .scene-container {
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
  }
  .scene.one {
    display:block;
  }
  
.float {
  display:inline-block;
  width:25px;
  height:25px;
  background:black;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
  .animated .float {
    animation-name:floating;
  }
  .float:nth-child(2) {
    animation-delay:.5s;
  }
  .float:nth-child(3) {
    animation-delay:1.5s;
  }
  .float:nth-child(4) {
    animation-delay:1s;
  }

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scenes">
  <div class="scene one">
    <div class="scene-container">
      <h1>WELCOME</h1>
      <button>Next scene</button>
      <p>(Animation delay is still visible even if you wait 2 seconds before clicking)</p>
    </div>
  </div>
  <div class="scene two">
    <div class="scene-container">
      <div class="float-container animated">
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
      </div>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

Вы можете использовать отрицательные задержки для достижения этого.

Я установил их, используя calc, чтобы прояснить логику, но вы также можете использовать вычисленное значение.

Любое значение, которое когда-тоделенное на продолжительность анимации дает то же самое напоминание, сохранит визуальный эффект без изменений 

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    $('.scene.one').hide();
    $('.scene.two').fadeIn(500);
  });
});
.scenes {
  height:150px;
  width:300px;
  border:1px solid black;
}
h1 {
  margin:0;
}
p {
  margin-bottom:0;
  font-size:12px;
}
.scene {
  position:relative;
  height:100%;
  width:100%;
  text-align:center;
  display:none;
}
  .scene-container {
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
  }
  .scene.one {
    display:block;
  }
  
.float {
  display:inline-block;
  width:25px;
  height:25px;
  background:black;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
  .animated .float {
    animation-name:floating;
  }
  .float:nth-child(2) {
    animation-delay:calc(.5s - 3s);
  }
  .float:nth-child(3) {
    animation-delay:calc(1.5s - 3s);
  }
  .float:nth-child(4) {
    animation-delay:calc(1s - 3s);
  }

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scenes">
  <div class="scene one">
    <div class="scene-container">
      <h1>WELCOME</h1>
      <button>Next scene</button>
      <p>(Animation delay is still visible even if you wait 2 seconds before clicking)</p>
    </div>
  </div>
  <div class="scene two">
    <div class="scene-container">
      <div class="float-container animated">
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 23 октября 2018

Если вы решите использовать visibility: visible и visibility: hidden вместо display, то вы можете анимировать элементы, прежде чем они будут видны пользователю.К сожалению, это означает, что вы не сможете получить эффект затухания (поскольку он работает только с display), но если это не является обязательным, это может быть жизнеспособным решением для вас: 

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    $('.scene.one').css('display', 'none');
    $('.scene.two').css('visibility', 'visible');
  });
});
.scenes {
  height: 150px;
  width: 300px;
  border: 1px solid black;
}

h1 {
  margin: 0;
}

p {
  margin-bottom: 0;
  font-size: 12px;
}

.scene {
  position: relative;
  height: 100%;
  width: 100%;
  text-align: center;
  visibility: hidden;
}

.scene-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.scene.one {
  visibility: visible;
}

.float {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: black;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.animated .float {
  animation-name: floating;
}

.float:nth-child(2) {
  animation-delay: .5s;
}

.float:nth-child(3) {
  animation-delay: 1.5s;
}

.float:nth-child(4) {
  animation-delay: 1s;
}

@keyframes floating {
  from {
    transform: translate(0, 0px);
  }
  65% {
    transform: translate(0, 15px);
  }
  to {
    transform: translate(0, -0px);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scenes">
  <div class="scene one">
    <div class="scene-container">
      <h1>WELCOME</h1>
      <button>Next scene</button>
      <p>(Wait 2 seconds before clicking)</p>
    </div>
  </div>
  <div class="scene two">
    <div class="scene-container">
      <div class="float-container animated">
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
        <div class="float"></div>
      </div>
    </div>
  </div>
</div>
...