javascript - using an onClick event to trigger a CSS3 transition -

javascript - using an onClick event to trigger a CSS3 transition -

i experimenting css3 transitions , want introduce onclick event trigger transition instead of pseudo hover class. problem have transition split onto 2 elements.

here html:

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

and here 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: 0.4s ease-in; -moz-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; -ms-transition: 0.4s ease-in; transition: 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: 0.4s ease-in-out 1.3s; -moz-transition: 0.4s ease-in-out 1.3s; -o-transition: 0.4s ease-in-out 1.3s; -ms-transition: 0.4s ease-in-out 1.3s; transition: 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; /* delay goes in hover(action state) overide delay in original state */ }

so question how apply onclick event transition spread on 2 elements? hope can help!

substitute :hover class, clicked

.box.clicked

then on click, utilize addclass add together clicked class .box. alter should trigger animation done :hover.

here's illustration using toggleclass add/remove class on click , alter height of div.

javascript jquery html5 css3 css-transitions