0

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?

Chevelho51
  • 25
  • 4
  • So you want to first add your `transitions` for the element i.e `#card1` in CSS then in your JS attach your event like so `Card1.style.transform = scale(2,2)`. This could help explain your issue https://stackoverflow.com/questions/63766837/javascript-style-transform-scalex-y-animation-not-working – Sebastian Gbudje Apr 15 '22 at 14:54
  • You are also missing a trigger `event` i.e you have nothing telling the DOM what to do with those elements. Add some type of `eventListener`. see https://stackoverflow.com/questions/71880309/how-to-create-button-in-javascript-to-preform-flip-of-card-on-click/71880485#71880485 for another approach on doing this – Sebastian Gbudje Apr 15 '22 at 14:56

0 Answers0