jquery - css3动画不以jquery点击事件开始

Question

我有两个 div 标签，分别是卡 1 和卡 2。当用户点击卡 2 时，卡 2 应该缩小，卡 1 应该放大。我正在使用 css3 转换和 jquery click 事件来执行此操作。问题是它根本没有启动那个动画。这是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

试试这个：

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 2

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

.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 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 小提琴演示