Question

当您单击动画循环时，我已经完全工作了，但是当按A时如何实现相同的切换效果？相同的开关效果回和堡垒。非常感谢。

您的帖子似乎主要是代码；请添加更多详细信息。看来您的帖子大部分是代码；请添加更多详细信息。

演示： https://jsfiddle.net/rihotzu/nywbvxqd/1/#

HTML

dotnet ef migrations add InitialCreate

CSS：

migrationBuilder.CreateTable(
  name: "Invitation",
  columns: table => new
  {
    AddressId = table.Column<Guid>(nullable: false),
    ...
  },
  constraints: table =>
  {
    table.PrimaryKey("PK_Invitation", x => x.Id);
    table.ForeignKey(
      name: "FK_Invitation_Address_AddressId",
      column: x => x.AddressId,
      principalTable: "Address",
      principalColumn: "Id",
      onDelete: ReferentialAction.Cascade);
  });

JS：

<!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>

Answer 1

我修复了您的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);

Answer 2

 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
    }



};

按键时如何触发动画

2 个答案: