I am trying a simple animation effect of a flipping card using CSS and JS and I tried this approach (that is not working):
CSS:
.card {
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
width: 60px;
height:60px;
text-align:center;
border: 0px;
background-color: white;
border-color: lightgrey;
border-style:solid;
border-width:2px;
border-radius:10%;
font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size:larger;
font-weight: bold;
transition: transform 0.5s;
}
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
HTML:
<div id="card1" class="card">
JS:
var card = document.getElementById('card1')
card.classList.add('notransition'); // disable transition
card.style.transform = 'scale(0,1)'; // set xscale = 0
card.classList.remove('notransition'); // reenable transition
card.style.transform = 'scale(1,1)'; // animate it to xscale = 1
I tried it either (no success):
var card = document.getElementById('card1')
card.style.transition = 'none';
card.style.transform = 'scale(0,1)';
card.style.transition = 'transform 0.5s';
card.style.transform = 'scale(1,1)';
In both cases I don't get any error, it just won't display any transition.
What am I doing wrong here?