下面直接给出源代码,直接运行即可,只需要在元素上动态添加对应的动画类名即可,动画默认只执行一次,我们可以动态的删除和新增class来实现动画重复执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
div {
width: 200px;
height: 200px;
line-height: 200px;
background-color: red;
color: white;
text-align: center;
}
@-webkit-keyframes slideInRight-enter {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translate(100%)
}
to {
opacity: 1;
transform-origin: 0 0;
transform: translate(0)
}
}
@keyframes slideInRight-enter {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translate(100%)
}
to {
opacity: 1;
transform-origin: 0 0;
transform: translate(0)
}
}
@-webkit-keyframes slideInRight-leave {
0% {
transform-origin: 0 0;
transform: translate(0);
opacity: 1
}
to {
transform-origin: 0 0;
transform: translate(100%);
opacity: 0
}
}
@keyframes slideInRight-leave {
0% {
transform-origin: 0 0;
transform: translate(0);
opacity: 1
}
to {
transform-origin: 0 0;
transform: translate(100%);
opacity: 0
}
}
@-webkit-keyframes slideInLeft-enter {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translate(-100%)
}
to {
opacity: 1;
transform-origin: 0 0;
transform: translate(0)
}
}
@keyframes slideInLeft-enter {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translate(-100%)
}
to {
opacity: 1;
transform-origin: 0 0;
transform: translate(0)
}
}
@-webkit-keyframes slideInLeft-leave {
0% {
transform-origin: 0 0;
transform: translate(0);
opacity: 1
}
to {
transform-origin: 0 0;
transform: translate(-100%);
opacity: 0
}
}
@keyframes slideInLeft-leave {
0% {
transform-origin: 0 0;
transform: translate(0);
opacity: 1
}
to {
transform-origin: 0 0;
transform: translate(-100%);
opacity: 0
}
}
@-webkit-keyframes dialog-fade-in {
0% {
transform: translate3d(0,-20px,0);
opacity: 0
}
to {
transform: translateZ(0);
opacity: 1
}
}
@keyframes dialog-fade-in {
0% {
transform: translate3d(0,-20px,0);
opacity: 0
}
to {
transform: translateZ(0);
opacity: 1
}
}
@-webkit-keyframes dialog-fade-out {
0% {
transform: translateZ(0);
opacity: 1
}
to {
transform: translate3d(0,-20px,0);
opacity: 0
}
}
@keyframes dialog-fade-out {
0% {
transform: translateZ(0);
opacity: 1
}
to {
transform: translate3d(0,-20px,0);
opacity: 0
}
}
@-webkit-keyframes modal-fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes modal-fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@-webkit-keyframes modal-fade-out {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes modal-fade-out {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@-webkit-keyframes v-modal-in {
0% {
opacity: 0
}
}
@keyframes v-modal-in {
0% {
opacity: 0
}
}
@-webkit-keyframes v-modal-out {
to {
opacity: 0
}
}
@keyframes v-modal-out {
to {
opacity: 0
}
}
/* 从右往左淡入 */
.slideInLeft-enter{
animation-name: slideInLeft-enter;
animation-duration: 2s;
}
/* 从右往左淡出 */
.slideInLeft-leave{
animation-name: slideInLeft-leave;
animation-duration: 2s;
}
/* 从左往右淡入 */
.slideInRight-enter{
animation-name: slideInRight-enter;
animation-duration: 2s;
}
/* 从左往右淡出 */
.slideInRight-leave{
animation-name: slideInRight-leave;
animation-duration: 2s;
}
/* 从上往下淡入 */
.dialog-fade-in{
animation-name: dialog-fade-in;
animation-duration: 2s;
}
/* 从下往上淡出 */
.dialog-fade-out{
animation-name: dialog-fade-out;
animation-duration: 2s;
}
/* 淡入 */
.modal-fade-in{
animation-name: modal-fade-in;
animation-duration: 2s;
}
/* 淡出 */
.modal-fade-out{
animation-name: modal-fade-out;
animation-duration: 2s;
}
/* 快速淡入 */
.v-modal-in{
animation-name: v-modal-in;
animation-duration: 2s;
}
/* 快速淡出 */
.v-modal-out{
animation-name:v-modal-out;
animation-duration: 2s;
}
</style>
<script src="../js/jquery-1.8.2.min.js"></script>
<div id="iframeConent" >hello word</div>
<button id="btn"> 切换 </button>
<body>
<script type="text/javascript">
var flag = true;
document.getElementById('btn').addEventListener('click',function(){
var iframeConentClass = document.getElementById('iframeConent').classList;
if(flag){
iframeConentClass.add('slideInLeft-enter');
iframeConentClass.remove('slideInLeft-leave');
}else{
iframeConentClass.add('slideInLeft-leave');
iframeConentClass.remove('slideInLeft-enter');
}
flag = !flag;
})
</script>
</body>
</html>