javascript - 仅当单击多个 div 相互重叠的按钮时才启动 css 动画
问题描述
我有几个不同的内容（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
解决方案
如果您只想在单击时更改背景颜色，则只需从单击的项目中获取填充颜色，然后在您的正方形上应用相同的背景颜色。像这样。
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>但是正如你在评论中提到的，如果你想用它的属性和文本和其他东西来改变整个正方形，然后做这样的事情，你需要在点击的项目和方形框之间创建一个关系，并且只显示 reated项目而不是其他项目。像这样，
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 属性，根据您的需要更改这些属性。
推荐阅读
- apache-kafka - 如果我在代理级别和主题级别设置配置，哪个优先？
- javascript - 如何检测用户是从我的网站导航到另一个网站还是只是刷新它
- java - Unity hub 无法安装打开的 JDK
- python - 与 cartopy 一起使用时，上下颠倒映射
- javascript - AJAX 警报响应返回整个 php 脚本
- c++ - 为什么删除函数内的元素后列表不更新？
- jquery - jQuery 选择器：如何模糊匹配属性
- flutter - 如何使用 SingleChildScrollView 仅滚动 tabbarview 并将 tabbar 设置为固定在顶部
- r - 每个实体的连续值和相关位置 - R
- docker - 当运行多个部署时，Kubernetes 是否会遭受 Docker Swarm 随机出现的“更新乱序”错误？