1

I have this animation that I applied to a table. I would like for it to take place each time I click on a link that will change the contents of the table but not instantly when I am loading the page.

.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);
  }
}
Zack Roberto
  • 229
  • 1
  • 2
  • 10

4 Answers4

0

First remove class scale-up after it use addClass or toogleClass :

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


$(document).ready(function(){
  $('a').click(function(){
  $('table').addClass('scale-up');
  })
})
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);
  }
}
<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>

you can use toogleClass also:

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


$(document).ready(function(){
  $('a').click(function(){
  $('table').toggleClass('scale-up');
  })
})
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);
  }
}
<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>
Ehsan
  • 12,655
  • 3
  • 25
  • 44
0

You can definitely achieve that using either JavaScript or JQuery. The trick is to add a class on certain event. Here is an example

JavaScript

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

JQuery

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

Read more about it at here and here.

CuriousMind
  • 3,143
  • 3
  • 29
  • 54
0

Try this, this is done in 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>
Abin Thaha
  • 4,493
  • 3
  • 13
  • 41
0

This can be done with JQuery - after adding the class, you will also need to remove it after the animation is complete to ensure it can be toggled on subsequent clicks. I've done this with a 500ms timeout in the example below:

(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

Alex Tulic
  • 44
  • 1
  • 8