我有一个 DIV
,我想在单击按钮时缩小该 DIV,并在单击 DIV
本身时缩小。我的比例部分工作得很好,但是当我尝试删除 fadeIn
类时,当我扩展动画时 fadeOut
会中断。
HTML
<button id="myBtn">Click Me</button>
<div id="animateBox" class="box"><div>
CSS
.box {
width: 200px;
height: 200px;
background-color:red;
visibility: hidden;
border-radius: 200px;
}
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
/* 60% {
transform: scale(0.4);
}
80% {
transform: scale(0.8);
opacity: 1;
} */
100% {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
/* 60% {
-webkit-transform: scale(0.4);
}
80% {
-webkit-transform: scale(0.8);
opacity: 1;
} */
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
.fadeOut {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: hidden;
}
@keyframes fadeOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0);
opacity: 0;
}
}
@-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
100% {
-webkit-transform: scale(0);
opacity: 0;
}
}
jQuery
$('#myBtn').click(function() {
$('#animateBox').addClass("fadeIn");
});
$('#animateBox').click(function() {
$( this ).addClass( "fadeOut" );
$( this ).removeClass( "fadeIn" );
});
最佳答案
刚刚修改了纳西尔的答案并引用了这个answer使动画流畅。
CSS
.box {
width: 200px;
height: 200px;
background-color:red;
visibility: hidden;
border-radius: 200px;
}
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
/* 60% {
-webkit-transform: scale(0.4);
}
80% {
-webkit-transform: scale(0.8);
opacity: 1;
} */
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
.fadeOut {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode:forwards;
/*Chrome 16+, Safari 4+*/
-moz-animation-fill-mode:forwards;
/*FF 5+*/
-o-animation-fill-mode:forwards;
/*Not implemented yet*/
-ms-animation-fill-mode:forwards;
/*IE 10+*/
animation-fill-mode:forwards;
/*when the spec is finished*/
visibility:visible;
}
@keyframes fadeOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0.5);
}
}
@-webkit-keyframes fadeOut {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(0);
}
}
<强> Working Fiddle
关于CSS 缩放比例打破,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25062130/