Question

现在我正在尝试在按下按钮时向div添加动画。但是，我不确定如何使用JavaScript或jQuery按钮单击时触发自定义动画。截至目前，我没有为此编写任何JavaScript。

我是新手，所以我问专业人士！

HTML：

<div class="container" id="frontPage">
        <div "container">
            <h1 class="header center green-text">ABOUT</h1>
            <div class="row center">

                <p class="header col s12 light">Something here</p>

            </div>        
        </div>
        <div class="row center padding-bottom-1">
            <a a href="{{ url('/loginpage') }}" class="btn-small green" id="loginButton">login</a>
            <a class="btn-small green">apply</a>
        </div>
    </div>

CSS：

#frontPage {
  text-align: center;
  margin-top: 80px;
  position: relative;
  animation-name: slideOutLeft;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  width: 500px;
}

@keyframes slideOutLeft {
  0% {left: 0;}
  100% {left: -1500px;}

}

Answer 1

要在按钮上单击触发CSS动画，您可以将CSS规则放在自己的类中。然后，您可以在单击按钮时将该类应用于所需元素，如下所示：

＆＃13;

$(function() {
  $('button').click(function() {
    $('#frontPage').addClass('slideOutLeft');
  });
});

＆＃13;

#frontPage {
  text-align: center;
  margin-top: 80px;
  position: relative;
  width: 500px;
}

.slideOutLeft {
  animation: slideOutLeft 1s forwards;
}

@keyframes slideOutLeft {
  0% {
    left: 0;
  }
  100% {
    left: -1500px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click me</button>
<div class="container" id="frontPage">
  <div id="container">
    <h1 class="header center green-text">ABOUT</h1>
    <div class="row center">
      <p class="header col s12 light">Something here</p>
    </div>
  </div>
  <div class="row center padding-bottom-1">
    <a a href="#" class="btn-small green" id="loginButton">login</a>
    <a class="btn-small green">apply</a>
  </div>
</div>

＆＃13;

单击按钮时自定义动画启动？ HTML，CSS，JS

1 个答案: