Css3动画不开始与jquery点击事件

Question

我有两个div标签，分别是card 1和card 2。当用户点击卡片2时，卡片2应该缩小，卡片1应该扩大。我使用css3转换和jquery点击事件来做到这一点。问题是它根本不启动动画。

我的代码

.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

这里是提琴检查这个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');
});

Answer 2

试试这个:

card = $('.card');
card2 = $('.card2');
card2.on('click', function () {
    card2.removeClass('scaleUp').addClass('scaleDown');
    card.removeClass('scaleDown').addClass('scaleUp');
});
card.on('click', function() {
    card.removeClass('scaleUp').addClass('scaleDown');
    card2.removeClass('scaleDown').addClass('scaleUp');
});

CSS:

.card {
    width: 0px; 
    height: 0px;
    border: 1px solid red;
    background: lightblue;
}
.card2 {
    width: 200px; 
    height: 200px;
    border: 1px solid blue;
    background: orange;
}
.scaleUp {
    width: 200px;
    height: 200px;
    transition: all 3s;
}
.scaleDown {
    width: 0px;
    height: 0px;
    transition: all 3s;
}

这里有一个小提琴，你可以试试:http://jsfiddle.net/tkahn/Humu3/21/

Answer 3

这是另一个方法，使用jQuery .animate();

jsFiddle

$('.card2').click(function () {
    $('.card').animate({
        width: '200',
        height: '200',
        fontSize: '100%',
        opacity: '1'
    }, 500, function () {});
    $('.card2').animate({
        width: '0',
        height: '0',
        fontSize: '0%',
        opacity: '0'
    }, 500, function () {});
    $('.card').click(function () {
        $('.card2').animate({
            width: '200',
            height: '200',
            fontSize: '100%',
            opacity: '1'
        }, 500, function () {});
        $('.card').animate({
            width: '0',
            height: '0',
            fontSize: '0%',
            opacity: '0'
        }, 500, function () {});
    });
});

这个方法有几个优点:

• 对于旧的浏览器，它应该会优雅地降级，不透明度可能会丢失，但缩放仍然可以工作。
• div内的文本将随着div缩放/隐藏。
• 边框将与div一起隐藏。

Answer 4

您可以使用jQuery Transit来完成此操作。它适用于大多数浏览器，在移动设备上也表现良好:

//set card initial state
$('.card2').css({ scale: 0 });
$('.card').on('click', function () 
{
    $('.card2').transition({ scale: 1 }, 3000);
    $('.card').transition({ scale: 0 }, 3000);
});
$('.card2').on('click', function () 
{
    $('.card2').transition({ scale: 0 }, 3000);
    $('.card').transition({ scale: 1 }, 3000);
});

JS Fiddle Demo