Выполнение анимации по ключевым кадрам в JS или jQuery - PullRequest
Новая
       83

Выполнение анимации по ключевым кадрам в JS или jQuery

1 голос
/ 27 мая 2020

Я знаю, что можно установить анимацию элемента по идентификатору либо в таблице стилей, либо в JS из DOM. Проблема в том, что я хочу, чтобы анимация выполнялась каждый раз, когда пользователь выполняет действие щелчка по указанному элементу c. Добавление анимации к стилю элемента в JS, кажется, добавляет ее навсегда, так что анимация ключевых кадров не может быть выполнена повторно (выполняется только один раз, когда окно завершает загрузку). Я также думал об использовании функции jQuery * .animate(), однако вся документация указывает на то, что она анимируется поверх стилей CSS Speci c, а не устанавливает / вызывает атрибут стиля анимации, как если бы я должен был установить его с помощью CSS . Я хочу знать, как лучше всего выполнить мою анимацию над элементом, когда пользователь щелкает другой элемент, и последовательно выполнять анимацию для каждого щелчка. 

@keyframes fadeInDown {
  from {
   opacity: 0;
   transform: translate(0, -20%);
 }
 to {
   opacity: 1;
   transform: translate(0, 0);
 }
}

Текущий способ, которым я устанавливаю анимацию для элемент: 

$("#element").css("animation", "fadeInDown 0.5s ease-in 0s 1");

Ответы [ 3 ]

1 голос
/ 27 мая 2020

Это анимация переключения с использованием перехода и jquery, без использования .animate()

$(document).ready(function() {
  $('button').click(function() {
    var box = $('.box')
    box.removeClass("show")
    setTimeout(function(){
        box.addClass("trans").addClass("show")
        setTimeout(function(){
            box.removeClass("trans")
        },100)
    },200)
  });
});
.box {
  background: red;
  height: 50px;
  width: 50px;
  position: absolute;
  margin-top: 50px;
  margin-left: 50px;
  opacity: 0;
  transform: translate(0, -20%);
}

.box.trans {
  transition: all 0.7s;
}

.box.show {
  opacity: 1;
  transform: translate(0, 0);
}
<button>Test</button>
<div class="box show"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
0 голосов
/ 27 мая 2020

Это простой пример использования jquery для анимации в очереди, как это работает в @keyframes. Продолжительность перехода и продолжительность анимации дают больше контроля над персонажем анимации. 

$(document).ready(function() {
  $('button').click(function() {
    $('.box')
      .css('transition', 'all 0.2s')
      .animate({ opacity: 0 }, {
        duration: 200,
        step: function(now) {
          $(this).css({ opacity: now });
          $(this).css({ transform: 'translate(0, -20%)' });
        }
      })
      .animate({ opacity: 1 }, {
        duration: 600,
        step: function(now) {
          $(this).css({ opacity: now });
          $(this).css({ transform: 'translate(0, 0)' });
        }
      })
  });
});
.box {
  background: red;
  height: 50px;
  width: 50px;
  position: absolute;
  margin-top: 50px;
  margin-left: 50px;
}
<button>Test</button>
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
0 голосов
/ 27 мая 2020

Обычно CSS анимация запускается только один раз при загрузке страницы. Таким образом, невозможно повторно запустить его снова. Вот обходной путь для вашего варианта использования: полностью удалите элемент со страницы и снова вставьте его.

Попробуйте следующее: 

$('button').click(() => {
  var oldDiv = $('#animated-div');
  newDiv = oldDiv.clone(true);

 	oldDiv.before(newDiv);

	$("." + oldDiv.attr("class") + ":last").remove();
});
@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate(0, -20%);
    }
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
}

.animated-div {
  animation: fadeInDown 0.5s ease-in 0s 1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animated-div" class="animated-div" style="width: 50px; height: 50px; background: black"></div>
<button>
Test
</button>
...