使用 onClick 事件触发 CSS3 过渡答案

【问题标题】：using an onClick event to trigger a CSS3 transition使用 onClick 事件触发 CSS3 过渡
【发布时间】：2014-06-24 23:30:37
【问题描述】：

我正在试验 css3 过渡，并想引入一个 onClick 事件来触发过渡，而不是伪悬停类。我遇到的问题是过渡分为两个元素。

这是 HTML：

<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/>
<div class="mask">
<!-- Further content goes here -->
</div>
</div>

这是 CSS：

.box {
    width: 300px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border: solid 2px #E6171A;              
}

.mask {
    width: 300px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #021288;
     -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        -webkit-transform: scale(0) rotate(-360deg);
        -moz-transform: scale(0) rotate(-360deg);
        -o-transform: scale(0) rotate(-360deg);
        -ms-transform: scale(0) rotate(-360deg);
        transform: scale(0) rotate(-360deg);
        -webkit-transition: all 0.4s ease-in;
        -moz-transition: all 0.4s ease-in;
        -o-transition: all 0.4s ease-in;
        -ms-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
}

.box:hover .mask {
     -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: .4;
    -webkit-transform: scale(1) rotate(0deg);
    -moz-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    -webkit-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    -ms-transition-delay: .4s;
    transition-delay: .4s;
}

.box img {
    -webkit-transition: all 0.4s ease-in-out 1.3s;
    -moz-transition: all 0.4s ease-in-out 1.3s;
    -o-transition: all 0.4s ease-in-out 1.3s;
    -ms-transition: all 0.4s ease-in-out 1.3s;
    transition: all 0.4s ease-in-out 1.3s;
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.box:hover img {
    -webkit-transform: translateX(300px);
    -moz-transform: translateX(300px);
    -o-transform: translateX(300px);
    -ms-transform: translateX(300px);
    transform: translateX(300px);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition-delay: .8s;
    -moz-transition-delay: .8s;
    -o-transition-delay: .8s;
    -ms-transition-delay: .8s;
    transition-delay: .8s;
/* the delay goes in the hover(action state) to overide the delay in the original state     */
}

所以问题是如何将 onClick 事件应用于分布在两个元素上的过渡？希望有人能帮忙！

【问题讨论】：

标签： javascript jquery html css css-transitions

【解决方案1】：

用一个类替换:hover，比如clicked

.box.clicked

然后单击，使用addClass 将clicked 类添加到.box。该更改应该会触发最初由 :hover 完成的动画。

Here's an example using toggleClass to add/remove the class on click and change the height of the div.

【讨论】：