如何在JS中暂时暂停过渡 /转换效应？

Question

我正在尝试使用CSS和JS的翻转卡的简单动画效果，我尝试了这种方法（这是行不通的）：

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

我尝试过它（没有成功）：

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)';

在这两种情况下，我都没有得到任何错误，它都不会显示任何过渡。

我在这里做错了什么？