Как сделать анимацию прогресса с помощью анимации при запуске css - PullRequest
Новая
       19

Как сделать анимацию прогресса с помощью анимации при запуске css

0 голосов
/ 08 мая 2019

Я пытаюсь реализовать анимированный индикатор выполнения с анимацией запуска.

Проблема в том, что я использую transform: translateX(-100%);, который производит ужасный эффект - индикатор выполнения находится за пределами области выполнения.

Core: 

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}

.child {  
    background:black;
    width: 50%;
    height: 100%;
    animation: 1s ease-out 0s 1 slideInFromLeft;
} 
<div class="progress">
  <div class="child">x</div>
</div>

Как я могу исправить этот ужасный эффект? Или есть способ получше?

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

Посмотрите на CSS свойство position , вам нужно относительное положение и абсолютное положение.

Затем animation-fill-mode

forwards Цель сохранит вычисленные значения, установленные последним ключевым кадром, обнаруженным во время выполнения.Последний ключевой кадр зависит от значения animation-direction и animation-iteration-count: 

@keyframes slideInFromLeft {
  to{ width: 50%; }
}

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}

.child {  
    position:absolute;
    left:0;
    top:0;
    background:black;
    width: 0%;
    height: 100%;
    overflow:hidden;
    animation: slideInFromLeft 1s ease forwards;
} 
<div class="progress">
  <div class="child">x</div>
</div>

Теперь, если вы хотите анимировать его с помощью translate, вы должны добавить переполнение: скрыто в родительский элемент 

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
}

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
    overflow:hidden
}

.child {  
    background:black;
    width: 50%;
    height: 100%; 
    transform: translateX(0%);
    animation: slideInFromLeft 1s ease;
} 
<div class="progress">
  <div class="child">x</div>
</div>
0 голосов
/ 08 мая 2019

Попробуй это !! 

@keyframes slideInFromLeft {
  0% {
    width: 0;
    /*transform: translateX(-100%);*/
  }
  100% {
    width: 90%;
    /*transform: translateX(0);*/
  }
}

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
    overflow:hidden;
}

.child {  
    background:black;
    width: 90%;
    height: 100%;
    animation: 1s ease-out 0s 1 slideInFromLeft;
}

Использование CSS-перехода и Jquery 

<div class="progress">
  <div class="child">x</div>
</div>

.progress {
    width: 200px;
    height: 50px;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
}

.child {
    background: black;
    width: 0;
    height: 100%;
    transition: width 2s;
}

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

$(".child").css('width','50%');
...