动画不同步

问题描述 投票:0回答:1

图像和背景色不同步。而且我需要平滑的动画,以便图像和bgcolor一起消失。它仅在第一次迭代时工作顺利。请检查codepen。我花了5个小时,不知道发生了什么事。它仅在第一次迭代时工作顺利。请检查codepen。我花了5个小时,不知道发生了什么事。https://codepen.io/l-ba-iwanowa/pen/poJZQVN

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="https://fonts.googleapis.com/css?family=Caveat&display=swap" rel="stylesheet">
	<style>

body,
 .col-1,
 .col-3-4,
  .col-1 p {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
}

#rcorners1 {
  border-radius: 15px  50px;
  background-color: yellow;
  padding: 20px;
  width: 200px;
  height: 150px;
  animation-name: bbb;
  animation-duration: 5s;
   animation-fill-mode: forwards;

}

#rcorners1:hover {
	width:600px;
	 transform: translate(300px); 
	 transition:1s;
}

@keyframes bbb {
	0% {background-color: blue;}
	100% {background-color: red}
}


.asd {
	width: 1000px;
	height: 600px;
	/*overflow: hidden;*/
	position:relative;
	margin: 0 auto;
}

.asd img{
	width: 100%;
	width: 1000px;
	height: 600px;
}

.asd img {
	position:absolute;
	top: 0;
}

.asd img.top {
	/*position:relative;*/
	
	opacity: 0;
	transition: 2s;

}
/*
.asd img.top:hover  {
	opacity: 100;
}*/


.trans {
	opacity: 100  !important;
}


#container {
	max-width: 1000px;
	margin:0 auto;
}

.col-1 {
	width:25%;
	display:inline-block;
	vertical-align: top;
}

.col-3-4 {
	width:75%;
	display:inline-block;
	vertical-align: top;
}

.relative {
	position:relative;
}


.black-col {
	position: relative;
	top: -150px;
	background: #474747;
	height: 300px;
	color:white;
	padding: 1rem;
}

.zastup {
	position: relative;
	top:-50px;
	background-color: white;
	word-wrap: break-word;
}

img {
	max-width: 100%;
}
.slider-bg {
	background-color: rgb(0,0,0);
	transition: background-color 2s;
}



#container2 {
	width: 900px;
	margin: 0 auto;
}





.slider-nav {
	float:right !important;
}




ul {
 /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Reset styles */
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {

 /* Rounded border */
        border-radius: 9999px;
        height: 14px;
        width: 14px;

        /* Active dot */
        /*background-color: rgba(0, 0, 0, .3);*/

        /* Inactive dot */
         background-color: rgba(255, 255, 255, .3);
        /*border: 1px solid rgba(0, 0, 0, .3);*/

        /* OPTIONAL: Spacing between dots */
        margin: 0 12px;
        transition: transform 0.5s, background-color 0.5s;
}

.nav-active {
	 background-color: rgba(255, 255, 255, .9);
	 transform: scale(1.5);

}

.clear {
	clear:both;
	zoom: 1;
}



.col-1-3 {
	position: relative;
	width: 33%;
	word-wrap: break-word;
	white-space: nowrap;
	display: inline-block;
	vertical-align: top;
	padding: 1rem;
	box-sizing: border-box;
}

button.abc {
	border: 0;
	background-color: #e86d10;
	padding: 1rem 2rem;
border-radius: 25px;
font-size: inherit;
color: #fff;

}


.price {
	font-size:1.5rem;
	position: relative;
	top:-20px;
}

.description {
	position: relative;
	top:-40px;
word-break: break-all;
white-space: pre-wrap;
font-size: 1.2rem;
	
 }

.p1rem {
	padding: 1rem;
}

.orange {
	color: #e86d10;
}

.apply-font {
	font-family: 'Caveat', cursive;

}


.bg-black {
	background-color: rgb(0,0,0);
}


.bg-blue {
	background-color: rgb(34, 73, 200);
}


	</style>
</head>
<body>
	
<div id="container">


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum ab corrupti impedit culpa provident nemo numquam? Magnam, rerum, magni. Autem quisquam deserunt a est iste iure odit laudantium, dolores.</p>

</div>

<div class="slider-bg ">
<div class="asd">

	<!-- <img  src="https://i.ytimg.com/vi/tAp9BKosZXs/maxresdefault.jpg" alt=""> -->
	<img src="https://i.imgur.com/xCGxXuy.jpg" alt="">
	<img  class="top" src="https://i.imgur.com/D1tDvcG.jpg" alt="">
	<img  class="top" src="https://cdn.vox-cdn.com/thumbor/gBv91a9YqyhIxGsxc26x5TORV_8=/0x0:1296x730/1200x800/filters:focal(669x161:875x367)/cdn.vox-cdn.com/uploads/chorus_image/image/66274455/horsegirl.0.jpg" alt="">
	<img  class="top" src="https://1.bp.blogspot.com/-73o9cfxSC7Q/XQMxoVjfdMI/AAAAAAAAUkM/RSi0lSlsQoAfhMHLR-3U8Sfk_PpvZuziQCLcBGAs/s1600/copertina.jpg" alt="">



</div></div>

<div id="container2" style="position: relative;top:-60px; ">
	<ul class="slider-nav">
			<li data-id='0' class="nav-active"></li>
			<li data-id='1'></li>
			<li data-id='2'></li>
			<li data-id='3'></li>
			<li data-id='4'></li>
		</ul></div><div class="clear"></div>

<div id="container2">
	<div class="col-1 black-col">asd</div><!-- 
	 --><div class="col-3-4 zastup">







<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js'></script> -->
<script type="text/javascript">
console.log(111);
// document.querySelector('#btn-click').addEventListener('click', ()=>{
// 	document.querySelector('.top').classList.toggle("trans");
// 	console.log(document.querySelector('.top').classList);
// });


let p = document.querySelectorAll('.slider-bg img');
let pp = Array.from(p);
console.log(pp);

function changeBgColor (){


	if (i == 0 ) {

		document.querySelector('.slider-bg').style.backgroundColor = 'rgb(0,0,0)';
	}
		if (i == 1 ) {
			document.querySelector('.slider-bg').style.backgroundColor = 'rgb(34, 73, 200)';
	}
		if (i == 2 ) {document.querySelector('.slider-bg').style.backgroundColor = 'red';}
		if (i == 3 ) {document.querySelector('.slider-bg').style.backgroundColor = 'green';}

}

let i = 1;
function asd(arguments) {
	setTimeout(()=>{
	// b = arrayImages[i];
	// document.querySelector('#slider-hero img').src = b;

		let z = document.querySelectorAll('li');
		let zz = Array.from(z);
		zz.forEach((item)=>{item.classList.remove('nav-active')});
		// console.log(el);
		zz[i].classList.add('nav-active');

		

	b = pp[i];
	pp.forEach((val)=>{
		val.classList.remove('trans');
		
	});
	b.classList.add('top');
	b.classList.add('trans');
	changeBgColor();
	i++;
	if (i ==4) {
		i =0;
	}

	console.log(b);
	asd();
},4000);
}
asd();

document.querySelector('.slider-nav').addEventListener('click',(el)=>{
	if (el.target.tagName === 'LI') {
		let z = document.querySelectorAll('li');
		let zz = Array.from(z);
		console.log(el.target.dataset.id);
			b = pp[el.target.dataset.id];
			pp.forEach((val)=>{
				val.classList.remove('trans');
				
			});
			b.classList.add('top');
			b.classList.add('trans'); 


		zz.forEach((item)=>{item.classList.remove('nav-active');});
		 
		el.target.classList.add('nav-active');

		i = el.target.dataset.id;
		changeBgColor();
	}

});

</script>
</body>
</html>
javascript css
1个回答
0
投票

似乎对于Chrome浏览器来说工作正常。您可以使用以下命令验证所有浏览器的CSS:https://www.browseemall.com/Compatibility/ValidateCSS

可能存在浏览器兼容性问题。

似乎在IE10及更低版本中损坏。

ul{align-items:center;display:flex;justify-content:center;list-style-type:none;margin:0;padding:0;}
© www.soinside.com 2019 - 2024. All rights reserved.