Запускать css анимацию только при нажатии кнопки для нескольких перекрывающихся друг друга div - PullRequest
Новая
       0

Запускать css анимацию только при нажатии кнопки для нескольких перекрывающихся друг друга div

0 голосов
/ 27 мая 2020

У меня есть несколько различных элементов контента (div), перекрывающих друг друга в одном месте. Я хотел, чтобы анимация плавно появлялась при нажатии на триггер, чтобы отобразить желаемый контент. Но анимация воспроизводится только тогда, когда страница загружена, и никогда не будет воспроизводиться снова, если я активирую другой контент. HTML код: 

  <div id="content">
  <div class="content1 sq" id="square"></div>
  <div class="content2 sq" id="square"></div>
  <div class="content3 sq" id="square"></div>
  </div>

CSS код: 

#square{
  opacity: 1;
  animation: fade 3s linear;
}

@keyframes fade{
  0% {opacity: 0}
  100% {opacity: 1}

}

Javascript: 

var slideIndex = 1;
showDivs(slideIndex);

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("sq");
  var dots = document.getElementsByClassName("click");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.visibility = "hidden";  
  }
  x[slideIndex-1].style.visibility = "visible";

}

Приведенный выше код не является полным кодом поскольку кнопка для перехода к другому контенту - через SVG. Пожалуйста, перейдите по ссылке для получения полного кода. https://codepen.io/lemon55699/pen/bGVrMXz

1 Ответ

1 голос
/ 27 мая 2020

Если вы хотите изменить цвет фона только при щелчке мышью, просто получите цвет заливки для выбранного элемента и затем примените тот же цвет фона к своему квадрату. вот так. 

let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
    angleIncrement = 360 / circles.length;


circles.forEach(function(circle, index) {

  circle.addEventListener("click", function() {

    gsap.to(".wheel", {
      rotation: (index * angleIncrement) + "_short", 
      duration: 1,
      ease: "power1.inOut"
    });
  });
});

 
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});



var slideIndex = 1;
// showDivs(slideIndex);

// function currentDiv() {
//   var element = this,
//     style = getComputedStyle(element),
//     top = style.getPropertyValue('color');
    
// }
$(document).ready(function(){
  $('.click').click(function(){
    var bgColor = $(this).css('fill');
    $('#square').css('background-color' , bgColor);
  });
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
				.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}

.content1{
  position: absolute;
  top: 50px;
  right: 10px;
  width: 200px;
  height: 200px;
  border: 3px solid green;
  fill: green;
  background-color: green;

}
.content2{
  position: absolute;
  right: 10px;
  top: 60px;
  width: 180px;
  height: 180px;
  border: 3px solid yellow;
  background-color: yellow;

}
.content3{
  position: absolute;
  right: 10px;
  top: 70px;
  width: 160px;
  height: 160px;
  border: 3px solid red;
  background-color: red;

}

#square{
  opacity: 1;
  animation: fade 3s linear;
}

@keyframes fade{
  0% {opacity: 0}
  100% {opacity: 1}

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
  <g class="wheel">
			<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
				c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
				c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
				c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
				c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
				c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
			<g id="stick9">
				<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
				<circle id="wheel" class="st1 c9 click" cx="371.06" cy="346.49" r="50"/>
			</g>
			<g id="stick8">
				<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
				<circle id="wheel" class="st2 c8 click" cx="267.39" cy="406.34" r="50"/>
			</g>
			<g id="stick7">
				<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
				<circle id="wheel" class="st3 c7 click" cx="149.5" cy="385.55" r="50"/>
			</g>
			<g id="stick6">
				<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
				<circle id="wheel" class="st4 c6 click" cx="72.55" cy="293.85" r="50"/>
			</g>
			<g id="stick5">
				<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
				<circle id="wheel" class="st5 c5 click" cx="72.55" cy="174.15" r="50"/>
			</g>
			<g>
				<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
				<circle id="wheel" class="st6 c4 click" cx="149.5" cy="82.45" r="50"/>
			</g>
			<g id="stick3">
				<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
				<circle id="wheel" class="st7 c3 click" cx="267.39" cy="61.66" r="50" >
			</g>
			<g id="stick2">
				<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
				<circle id="wheel" class="st8 c2 click" cx="371.06" cy="121.51" r="50" />
			</g>
			<g id="stick1">
				<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
				<circle id="wheel" class="st9 c1 click" cx="412" cy="234" r="50" />
			</g>
  </g>

</svg>

<div id="content">
  <div class="content1 sq" id="square"></div>
</div>

но, как вы указали в комментарии, если вы хотите изменить весь квадрат с его свойствами, текстом и другими вещами, сделайте это примерно так для этого вам необходимо создать связь между выбранным элементом и квадратной рамкой и показать только связанный элемент, а не другие. Вот так, 

let circles = gsap.utils.toArray([".c1", ".c2", ".c3", ".c4", ".c5", ".c6", ".c7", ".c8", ".c9"]),
    angleIncrement = 360 / circles.length;


circles.forEach(function(circle, index) {

  circle.addEventListener("click", function() {

    gsap.to(".wheel", {
      rotation: (index * angleIncrement) + "_short", 
      duration: 1,
      ease: "power1.inOut"
    });
  });
});

 
let bounds = document.querySelector(".st0").getBBox();
gsap.set(".wheel", {svgOrigin: (bounds.x + bounds.width / 2) + " " + (bounds.y + bounds.height / 2)});

$(document).ready(function(){
  $('.circle').click(function(){
    var relation = $(this).data('relation');
    var squareReltedToClick = $("#content").find('#' + relation);
    $('.sq').removeClass('active');
    squareReltedToClick.addClass('active');
    var bgColor = $(this).css('fill');
    $('.sq').css('background-color', bgColor);
  });
});
#Layer_1 {width: 25%; height: 25%; padding-top: 20px; position: relative;}
#fixed{fill:none;stroke: #000000;stroke-width:2;}
				.st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st1{fill:#00FFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st2{fill:#0000FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st3{fill:#FF00FF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st4{fill:#C1272D;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st5{fill:#ED1C24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st6{fill:#F15A24;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st7{fill:#FF0000;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st8{fill:#FFFF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
				.st9{fill:#00FF00;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}

.sq{
  position: absolute;
  top: 50px;
  right: 90px;
  width: 200px;
  height: 200px;
  border: 3px solid green;
  fill: green;
  background-color: #00FF00;
  opacity: 0;
text-align:center;
  color: #fff;
font-size: 40px;
}
.sq.active {opacity:1;}

.sq.active{
  opacity: 1;
  animation: fade 3s linear;
}

@keyframes fade{
  0% {opacity: 0}
  100% {opacity: 1}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 470 467" style="enable-background:new 0 0 470 467;" xml:space="preserve">
  <g class="wheel">
			<path class="st0" d="M304,234c0,12.2-3.26,23.64-8.97,33.5c-1.96,3.39-4.21,6.59-6.7,9.57c-7.5,8.92-17.27,15.85-28.41,19.9
				c-3.62,1.32-7.4,2.34-11.28,3.02c-3.78,0.66-7.68,1.01-11.64,1.01c-8.05,0-15.77-1.42-22.92-4.03c-3.69-1.34-7.23-3-10.58-4.95
				c-10.17-5.87-18.65-14.35-24.53-24.52c-1.94-3.35-3.6-6.89-4.94-10.58c-2.61-7.15-4.03-14.87-4.03-22.92
				c0-3.97,0.34-7.85,1.01-11.63c0.68-3.89,1.7-7.66,3.02-11.29c4.05-11.15,10.99-20.92,19.9-28.4c2.98-2.51,6.18-4.76,9.57-6.71
				c9.85-5.71,21.29-8.97,33.5-8.97c3.97,0,7.86,0.34,11.64,1.01c11.83,2.07,22.6,7.25,31.43,14.67c2.99,2.51,5.75,5.27,8.25,8.26
				c7.42,8.83,12.6,19.59,14.67,31.43C303.66,226.15,304,230.03,304,234z"/>
			<g id="stick9">
				<line id="wheel" class="st1" x1="332.76" y1="314.35" x2="288.33" y2="277.07"/>
				<circle id="wheel" class="st1 c9 circle" data-relation="square9" cx="371.06" cy="346.49" r="50"/>
			</g>
			<g id="stick8">
				<line id="wheel" class="st2" x1="258.71" y1="357.1" x2="248.64" y2="299.99"/>
				<circle id="wheel" class="st2 c8 circle" data-relation="square8" cx="267.39" cy="406.34" r="50"/>
			</g>
			<g id="stick7">
				<line id="wheel" class="st3" x1="203.5" y1="292.02" x2="174.5" y2="342.25"/>
				<circle id="wheel" class="st3 c7 circle" data-relation="square7" cx="149.5" cy="385.55" r="50"/>
			</g>
			<g id="stick6">
				<line id="wheel" class="st4" x1="174.03" y1="256.92" x2="119.54" y2="276.75"/>
				<circle id="wheel" class="st4 c6 circle" data-relation="square6" cx="72.55" cy="293.85" r="50"/>
			</g>
			<g id="stick5">
				<line id="wheel" class="st5" x1="174.03" y1="211.08" x2="119.54" y2="191.25"/>
				<circle id="wheel" class="st5 c5 circle" data-relation="square5" cx="72.55" cy="174.15" r="50"/>
			</g>
			<g>
				<line id="wheel" class="st6" x1="203.5" y1="175.97" x2="174.5" y2="125.75"/>
				<circle id="wheel" class="st6 c4 circle" data-relation="square4" cx="149.5" cy="82.45" r="50"/>
			</g>
			<g id="stick3">
				<line id="wheel" class="st7" x1="258.71" y1="110.9" x2="248.64" y2="168.01"/>
				<circle id="wheel" class="st7 c3 circle" data-relation="square3" cx="267.39" cy="61.66" r="50"/>
			</g>
			<g id="stick2">
				<line id="wheel" class="st8" x1="332.76" y1="153.65" x2="288.32" y2="190.94"/>
				<circle id="wheel" class="st8 c2 circle" data-relation="square2" cx="371.06" cy="121.51" r="50"/>
			</g>
			<g id="stick1">
				<line id="wheel" class="st9" x1="362" y1="234" x2="304" y2="234"/>
				<circle id="wheel" class="st9 c1 circle" data-relation="square1" cx="412" cy="234" r="50" />
			</g>
  </g>

</svg>

<div id="content">
  <div class="content1 sq active" id="square1">I am number 1</div>
  <div class="content2 sq" id="square2">I am number 2</div>
  <div class="content3 sq" id="square3">I am number 3</div>
  <div class="content4 sq" id="square4">I am number 4</div>
  <div class="content5 sq" id="square5">I am number 5</div>
  <div class="content6 sq" id="square6">I am number 6</div>
  <div class="content7 sq" id="square7">I am number 7</div>
  <div class="content8 sq" id="square8">I am number 8</div>
  <div class="content9 sq" id="square9">I am number 9</div>
</div>

Я изменил некоторые свойства CSS для демонстрационных целей, измените их в соответствии с вашими потребностями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...