jquery - css3动画不启动jquery点击事件

Question

我有两个 div 标签，分别是卡片 1 和卡片 2。当用户点击卡片 2 时，卡片 2 应该缩小，卡片 1 应该放大。我正在使用 css3 转换和 jquery 单击事件来执行此操作。问题是它根本不启动该动画。这是 jsfiddle

这是我的代码

.card {
    border: 1px solid red;
    background: lightblue;
    visibility: hidden;
    transition: all 3s;
}
.card2 {
    width: 200px; height: 200px;
    border: 1px solid blue;
    background: orange;
    transition: all 3s;
}
.scaleUp {
    -webkit-transform: scale(1);
}
.scaleDown {
    -webkit-transform: scale(0);
}

Answer 1

这是 fiddle 检查这个http://jsfiddle.net/sarfarazdesigner/Humu3/27/ 你可以根据你的修改它并检查下面的代码 CSS

.card {
    border: 1px solid red;
    background: lightblue;
    transition: all 3s;
    visibility:hidden;
    width: 100px;
}
.card2 {
    width: 200px; height: 200px;
    border: 1px solid blue;
    background: orange;
    transition: all 3s;
}
.scaleUp {
    -webkit-transform: scale(2);/*Safari 5+, Chrome 10+*/
    -ms-transform: scale(2); /*Internet Exlorer 9+*/
    transform: scale(2);
}
.scaleDown {
    -webkit-transform: scale(0.50);/*Safari 5+, Chrome 10+*/
    -ms-transform: scale(0.50); /*Internet Exlorer 9+*/
    transform: scale(0.50);
}

jQuery

$('.card2').click(function () {
    $('.card').css({visibility:'visible'}).addClass('scaleUp');
    $(this).addClass('scaleDown');
});