Question

当我单击按钮时，我想要缩放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 1

刚刚修改了Nasir的答案，并引用了这个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

Answer 2

试试这个。一切都很好，但在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.75s;  
    -webkit-animation-duration: 0.75s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;

    visibility:visible
}

@keyframes fadeOut {
    0% {
        transform: scale(1);
        opacity: 1;     
    }
    100% {
        transform: scale(0.5);
        opacity: 1; 
    }       
}

@-webkit-keyframes fadeOut {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;     
    }
    100% {
        -webkit-transform: scale(0);
        opacity: 1;
    }       
}

CSS进出规模

2 个答案: