Question

我有这个动画，我应用于一个表。我希望每次点击链接时都会发生这种情况，这个链接会改变表格的内容，但在我加载页面时不会立即发生。

.scale-up {
    animation: scale-up 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

Answer 1

首先在使用scale-up或addClass后删除课程toogleClass：

$(document).ready(function(){
  $('a').click(function(){
  $('table').addClass('scale-up');
  })
})

＆＃13;

$(document).ready(function(){
  $('a').click(function(){
  $('table').addClass('scale-up');
  })
})

＆＃13;

table {
  transform: scale(0.5);
}

.scale-up {
    animation: scale-up 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#">Click On Me! </a>
<table border="1">
  <tr><td>This is tr1td1</td><td>This is tr1td2</td><td>This is tr1td2</td></tr>
  <tr><td>This is tr2td1</td><td>This is tr2td2</td><td>This is tr2td2</td></tr>
</table>

＆＃13;

您也可以使用toogleClass：

$(document).ready(function(){
  $('a').click(function(){
  $('table').toggleClass('scale-up');
  })
})

＆＃13;

$(document).ready(function(){
  $('a').click(function(){
  $('table').toggleClass('scale-up');
  })
})

＆＃13;

table {
  transform: scale(0.5);
}

.scale-up {
    animation: scale-up 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#">Click Me Two times... </a>
<table border="1">
  <tr><td>This is tr1td1</td><td>This is tr1td2</td><td>This is tr1td2</td></tr>
  <tr><td>This is tr2td1</td><td>This is tr2td2</td><td>This is tr2td2</td></tr>
</table>

＆＃13;

Answer 2

使用JavaScript或JQuery绝对可以实现这一点。诀窍是在某个事件上添加一个类。这是一个例子

<强>的JavaScript

var element = document.getElementById("myDIV");
element.classList.add("scale-up");

<强> JQuery的

$("button").click(function(){
  $("#myDiv").addClass("scale-up");
});

在here和here了解详情。

Answer 3

试试这个，这是在JQuery中完成的

$('.link').on('click', function(event) {
  event.preventDefault()
  $('.item').removeClass('scale-up');
  setTimeout(function() {
    $('.item').addClass('scale-up');
  }, 100)  
})

.scale-up {
    animation: scale-up 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='item'>Content</div>
<a class='link' href='#'>Click</a>

Answer 4

这可以通过JQuery完成 - 在添加类之后，您还需要在动画完成后将其删除，以确保可以在后续点击时切换它。我在下面的示例中以500毫秒超时完成了此操作：

(function() {
  var c = document.getElementById("table");

  function addAnim() {
    c.classList.add("scale-up");

    setTimeout(function() {
      c.classList.remove("scale-up");
    }, 500);
  }

  c.addEventListener("click", addAnim);
})();

Codepen

停止在CSS中自动播放动画

4 个答案: