页面切换css动画

2023-12-28 17:57:05

下面直接给出源代码,直接运行即可,只需要在元素上动态添加对应的动画类名即可,动画默认只执行一次,我们可以动态的删除和新增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>

文章来源:https://blog.csdn.net/m0_46188681/article/details/135258125
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。