CSS动画onClick

Question

CSS动画onClick

tek*_*agi 28 javascript css animation click onclick

如何使用JavaScript onClick获取CSS动画？我目前有:

.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}

Run Code Online (Sandbox Code Playgroud)

我该如何应用onClick？

Answer 1

Shi*_*oft 50

您确定只在webkit上显示您的页面吗？这是代码,传递在safari上.(id='img')单击按钮后图像将旋转.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
  }
  to {
    -webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}
</style>
<script type="text/javascript">
  function ani(){
    document.getElementById('img').className ='classname';
  }
</script>
<title>Untitled Document</title>
</head>

<body>
<input name="" type="button" onclick="ani()" />
<img id="img" src="clogo.png" width="328" height="328" />
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

请注意,使用`.className`将消除给定元素上的所有其他类.如果这是不受欢迎的,请使用`document.getElementById('img').classList.add('classname');` (15认同)
仅当您第一次单击时才会有动画。后续点击不会执行任何操作。使用下面的“悲伤同志”方法来启用多次点击。 (3认同)

Answer 2

Abb*_*bas 19

CSS ONLY 解决方案，适用于每次点击并播放动画到最后：

您所要做的就是将动画添加到 :focus伪类中并在:active伪类中将其设置为 none 。

如果您的元素不可聚焦，请tabindex="0"向 html 元素添加属性：

@keyframes beat {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(0.8,0.8);
            transform: scale(0.8, 0.8);
  }
}
.className {
  background-color:#07d;  
  color: #fff;
  font-family: sans-serif;
  font-size: 20px;
  padding: 20px;
  margin:5px;
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.className:focus {
  -webkit-animation: beat 1s ease-in-out backwards;
          animation: beat 1s ease-in-out backwards;
}
.className:active {
  -webkit-animation: none;
          animation: none;
}
body {
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

<h3>Any element with tabindex="0", like a div:</h3>
<div tabindex="0" class="className"> Click me many times!</div>
<h3>Any focusable element like a button:</h3>
<button class="className"> Click me many times!</button>

Run Code Online (Sandbox Code Playgroud)

我看到的一个问题是：如果我单击任一演示控件，然后切换选项卡，然后切换回来，动画就会在不单击它的情况下播放。 (5认同)

Answer 3

小智 17

您可以通过绑定onclick侦听器然后添加如下所示的animate类来实现此目的:

$('#button').onClick(function(){
    $('#target_element').addClass('animate_class_name');
});

Run Code Online (Sandbox Code Playgroud)

Answer 4

Pau*_*her 14

你只需使用:active伪类.单击任何元素时设置此项.

.classname:active {
    /* animation css */
}

Run Code Online (Sandbox Code Playgroud)

这对我非常有用。它仅在用户按住鼠标按钮时运行动画，这正是我所需要的。 (4认同)

Answer 5

Chi*_*tsu 10

在css-tricks上找到解决方案

const element = document.getElementById('img')

element.classList.remove('classname'); // reset animation
void element.offsetWidth; // trigger reflow
element.classList.add('classname'); // start animation

Run Code Online (Sandbox Code Playgroud)

@ptrcao reflow 是 Web 浏览器进程的名称，用于重新计算 HTML 文档中元素的位置和几何形状，以重新呈现部分或全部文档。某些浏览器 API 或文档属性会导致此进程重新启动，“elem.offsetWidth”就是其中之一 (2认同)

Answer 6

Not*_*ote 5

添加一个

-webkit-animation-play-state: paused;

Run Code Online (Sandbox Code Playgroud)

添加到 CSS 文件中，然后您可以使用以下 JS 行控制动画是否运行：

document.getElementById("myDIV").style.WebkitAnimationPlayState = "running";

Run Code Online (Sandbox Code Playgroud)

如果您希望动画在每次单击时运行一次。记得设置一下

-webkit-animation-iteration-count: 1;

Run Code Online (Sandbox Code Playgroud)

Answer 7

小智 5

var  abox = document.getElementsByClassName("box")[0];
function allmove(){
        abox.classList.remove("move-ltr");
        abox.classList.remove("move-ttb");
       abox.classList.toggle("move");
}
function ltr(){
        abox.classList.remove("move");
        abox.classList.remove("move-ttb");
       abox.classList.toggle("move-ltr");
}
function ttb(){
       abox.classList.remove("move-ltr");
       abox.classList.remove("move");
       abox.classList.toggle("move-ttb");
}

Run Code Online (Sandbox Code Playgroud)

.box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
.move{
  -webkit-animation: moveall 5s;
  animation: moveall 5s;
}
.move-ltr{
   -webkit-animation: moveltr 5s;
  animation: moveltr 5s;
}
.move-ttb{
    -webkit-animation: movettb 5s;
  animation: movettb 5s;
}
@keyframes moveall {
  0%   {left: 0px; top: 0px;}
  25%  {left: 200px; top: 0px;}
  50%  {left: 200px; top: 200px;}
  75%  {left: 0px; top: 200px;}
  100% {left: 0px; top: 0px;}
}
@keyframes moveltr {
  0%   { left: 0px; top: 0px;}
  50%  {left: 200px; top: 0px;}
  100% {left: 0px; top: 0px;}
}
@keyframes movettb {
  0%   {left: 0px; top: 0px;}
  50%  {top: 200px;left: 0px;}
  100% {left: 0px; top: 0px;}
}

Run Code Online (Sandbox Code Playgroud)

<div class="box"></div>
<button onclick="allmove()">click</button>
<button onclick="ltr()">click</button>
<button onclick="ttb()">click</button>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，9 月前
查看次数：	134744 次
最近记录：	5 年，11 月前