Как запустить анимацию при нажатии клавиши - PullRequest
Новая
       12

Как запустить анимацию при нажатии клавиши

0 голосов
/ 10 марта 2019

Я полностью работаю с циклом анимации, когда вы щелкаете по нему, но как я могу сделать тот же эффект переключения при нажатии A ?.Тот же эффект переключения назад и форте.Большое вам спасибо.

Похоже, ваш пост в основном кодовый;пожалуйста, добавьте некоторые подробности. Похоже, что ваш пост в основном код;пожалуйста, добавьте больше деталей.

DEMO: https://jsfiddle.net/rihotzu/nywbvxqd/1/#

HTML 

<!doctype <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>sprite test</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div class="default"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js" charset="utf-8"></script>

</html>

CSS:

body {
    background-color: black;
  margin: 0;
  padding: 0;
}

.default{
    cursor: pointer;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(10361px / 11);
  height: 210px;
  background: url(https://i.imgur.com/sz8vhOh.jpg);
  animation: open 0.5s steps(11);
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.default2{
    cursor: pointer;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(10361px / 11);
  height: 210px;
  background: url(https://i.imgur.com/sz8vhOh.jpg);
  animation: open 0.5s steps(11);
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.back{
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(10361px / 11);
    height: 210px;
    background: url(https://i.imgur.com/sz8vhOh.jpg);
    animation: close 0.5s steps(11);
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes open
{
    from
    {
        background-position: 0;
    }
    to
    {
        background-position: -10361px;
    }
}


@keyframes close
{
    from
    {
        background-position: -10361px;

    }
    to
    {
        background-position: 0;
    }
}

JS: 

$('.default').click(function() {
  $(this).removeClass('default');
  $(this).addClass('default2');



  $('.default2').click(function() {
    $(this).removeClass('default2');
    $(this).addClass('back');



    $('.back').click(function() {
        $(this).toggleClass('back');
        $(this).toggleClass('default2');
    });

  });

});

Ответы [ 2 ]

1 голос
/ 10 марта 2019

Я исправил ваши CSS и Javascript. Я удалил вложенные события click и создал функцию для событий click и keyup, чтобы избежать повторяющегося кода. Я также удалил некоторые имена классов и дубликаты в вашем CSS.

CSS 

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

.default{
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(10361px / 11);
  height: 210px;
  background: url(https://i.imgur.com/sz8vhOh.jpg);
  animation-duration: 0.5s;
  animation-timing-function: steps(11);
  animation-fill-mode: forwards;
}

.default.open {
  animation-name: open;
}

.default.close {
  animation-name: close;
}

@keyframes open
{
  from
  {
    background-position: 0;
  }
  to
  {
    background-position: -10361px;
  }
}


@keyframes close
{
  from
  {
    background-position: -10361px;
  }
  to
  {
    background-position: 0;
  }
}

Javascript 

function animate() {
  if($('.default').hasClass('open')) {
    $('.default').removeClass('open');
    $('.default').addClass('close');
  } else {
    $('.default').removeClass('close');
    $('.default').addClass('open');
  }
}

function animateOnKeyUp(e) {
    if(e.key === 'a') {
      animate();
    }
}

$('.default').click(animate);
$(window).keyup(animateOnKeyUp);
0 голосов
/ 10 марта 2019 
 document.onkeyup = function (e) {
    toggleLeft=true;
    if (e.which == 65 && toggleLeft) { // 65 is For A
       $(this).removeClass('default');
       $(this).addClass('default2');
       toggleLeft=false
    }else if(e.which == 65 && !toggleLeft){
       $(this).removeClass('default2');
       $(this).addClass('default');
        toggleLeft=true
    }



};
...