发表新帖
发表新帖

CSS Animation onClick

前端 未结
关注
8 369
忘了有多久
忘了有多久 2020-11-30 22:25

How can I get a CSS Animation to play with a JavaScript onClick? I currently have:

.classname {
  -webkit-animation-name: cssAnimation;
  -webkit-animation-d
相关标签:
8条回答
  • 星月不相逢
    2020-11-30 22:53

    Found solution on css-tricks

    const element = document.getElementById('img')

element.classList.remove('classname'); // reset animation
void element.offsetWidth; // trigger reflow
element.classList.add('classname'); // start animation
    0 讨论(0)
  • 离开以前
    2020-11-30 22:56

    You can do that by using following code

    $('#button_id').on('click', function(){
$('#element_want_to_target').addClass('.animation_class');});
    0 讨论(0)
  • 闹比i
    2020-11-30 22:57

    You can achieve this by binding an onclick listener and then adding the animate class like this:

    $('#button').onClick(function(){
    $('#target_element').addClass('animate_class_name');
});
    0 讨论(0)
  • 逝去的感伤
    2020-11-30 22:58 

    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");
}
    .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;}
}
    <div class="box"></div>
<button onclick="allmove()">click</button>
<button onclick="ltr()">click</button>
<button onclick="ttb()">click</button>

    0 讨论(0)
  • 长情又很酷
    2020-11-30 23:02

    Are you sure you only display your page on webkit? Here is the code,passed on safari. The image (id='img') will rotate after button click.

    <!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>
    0 讨论(0)
  • 终归单人心
    2020-11-30 23:05

    You just use the :active pseudo-class. This is set when you click on any element.

    .classname:active {
    /* animation css */
}
    0 讨论(0)
 看不清?
提交回复
热议问题