Question

我一直在尝试和尝试，但未能实现以下目标。我确定解决方案很简单，但我还没有达到目的。

让我们说我想在应用一个类（例如活动）时为一个元素（例如div）设置动画。我想在删除课程时（或与其他课程切换）来反转动画。

我想要动画的属性是缩放（变换）和不透明度。

此外，当进入页面时，元素将没有任何类，并且应该捕捉到其状态，而不是动画。它只应在明确添加或删除类时进行动画处理。

jsfiddle：http://jsfiddle.net/bertvan/9r98w/

HTML：

<div id="the-div"></div>
<a href="javascript:void(0)" onclick="trigger();">Trigger</a>

JS：

$(function(){
    $("a").click(function(){
        $("#the-div").toggleClass("active");
    });
});

CSS：

#the-div{
    width: 200px;
    height: 200px;
    background-image: url("http://placeimg.com/200/200/any");
    -webkit-transform: scale(0.7);
    opacity: 0.5;
}

#the-div.active{
    /* animate scale & opacity */
    -webkit-transform: scale(1);
    opacity: 1;
}

Answer 1

这是一个切换类的代码示例，用于通过转换动画更改div的大小。

HTML：
- 输入按钮，ID =＆＃34; setRemoveClassBtn＆＃34;
- div = tag，＆＃34; div1＆＃34;

您需要一个CSS类定义（请注意，这是使用在Firefox中使用的moz前缀）：

div{
width: 150px;
height: 150px;
background-color: rgb(250, 250, 150);
-moz-transition: width 5s, height 5s;
}

div.bigSizeDivs{
width: 250px;
height: 250px;
}

您必须使用javascript / jQuery添加/删除类。这是jQuery的一个例子

$("#setRemoveClassBtn").click(function(){
    $("#div1").toggleClass("bigSizeDivs");
});

Answer 2

您在div选择器上缺少transition属性：

running demo

已添加代码：

#the-div{
    transition: all 2s;
}

CSS3：通过应用类动画不透明度和缩放，并通过删除类动画回来

2 个答案: