這裏是一個解決方案,將CSS就會被一點點,因爲長所有供應商的前綴:
https://jsfiddle.net/leojavier/a2txcLou/6/
<a href="#" class="trigger">
<img src="http://www.fillmurray.com/100/100">
</a>
<a href="#" class="trigger">
<img src="http://www.fillmurray.com/100/100">
</a>
JS
$('.trigger').click(function() {
$('img').removeClass('fadein-translate');
$(this).addClass('fadeout-translate');
});
CSS
.fadein-translate {
-moz-animation: fadein-translate 3s ease-in-out;
-o-animation: fadein-translate 3s ease-in-out;
-webkit-animation: fadein-translate 3s ease-in-out;
animation: fadein-translate 3s ease-in-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes fadein-translate {
from {
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
to {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-moz-keyframes fadein-translate {
from {
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
to {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes fadein-translate {
from {
-moz-transform: translateY(50px);
-ms-transform: translateY(50px);
-o-transform: translateY(50px);
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
to {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
.fadeout-translate {
-moz-animation: fadeout-translate 1.5s ease-in-out;
-o-animation: fadeout-translate 1.5s ease-in-out;
-webkit-animation: fadeout-translate 1.5s ease-in-out;
animation: fadeout-translate 1.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes fadeout-translate {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
to {
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
}
}
@-moz-keyframes fadeout-translate {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
to {
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
}
}
@-webkit-keyframes fadeout-translate {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
to {
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px);
opacity: 0;
}
}
https://jsfiddle.net/leojavier/a2txcLou/6/
這很美,非常接近我的需求。你能幫我連接一下嗎?點擊圖片2恢復圖片的可見性1 – chilledMonkeyBrain
確定男人,給我一分鐘 –
添加p標籤https://jsfiddle.net/leojavier/a2txcLou/6/ – chilledMonkeyBrain