我的 CSS 文件有点问题。我尝试制作一个缩放到无限的图标（有效），当我单击图标时，动画将父级旋转到 90 度，图标旋转到 45 度（有效）。但是，如果我结合这两种行为，图标的旋转就会中断。我想旋转 45 度的图标，并保留动画。
演示示例：https : //codepen.io/KevinPy/pen/ooEbKY?editors=1100
在我的演示中，第一次出现时旋转到 45 度。第二次出现添加动画（通过类），但旋转是中断。
谢谢您的回答。
HTML
<div id="first"><span>+</span></div>
<div id="second"><span class="anim">+</span></div>
社会保障局
div {
margin: 25px;
display: inline-block;
position: relative;
background-color: blue;
width: 80px;
height: 80px;
&::before {
position: absolute;
top: 20px;
left: -20px;
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
&.open {
transition: .2s transform linear;
transform: rotate(90deg);
span {
transition: .2s transform linear;
transform: rotate(-45deg);
}
}
&.close {
transition: .2s transform linear;
transform: rotate(0deg);
span {
transition: .2s transform linear;
transform: rotate(0deg);
}
}
}
span {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 60px;
}
.anim {
animation: keyAnim 3.4s linear infinite;
transform-origin: 50%;
}
@keyframes keyAnim {
0%, 100% {
transform: scale(1);
}
35%, 65% {
transform: scale(1.2);
}
50% {
transform: scale(1.5);
}
}
您的动画会覆盖该transform属性。您可以添加一个周围的元素：
var first = document.querySelector('#first');
first.onclick = function(event) {
if (first.classList.contains('open')) {
first.classList.remove('open');
first.classList.add('close');
} else {
first.classList.add('open');
first.classList.remove('close');
}
};
var second = document.querySelector('#second');
second.onclick = function(event) {
if (second.classList.contains('open')) {
second.classList.remove('open');
second.classList.add('close');
} else {
second.classList.add('open');
second.classList.remove('close');
}
};div {
margin: 25px;
display: inline-block;
position: relative;
background-color: blue;
width: 80px;
height: 80px;
}
div::before {
position: absolute;
top: 20px;
left: -20px;
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
div.open {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
div.open .anim_wrap {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div.close {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
div.close .anim_wrap {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
span {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 60px;
}
.anim {
-webkit-animation: keyAnim 3.4s linear infinite;
animation: keyAnim 3.4s linear infinite;
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
@-webkit-keyframes keyAnim {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
35%, 65% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
@keyframes keyAnim {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
35%, 65% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}<div id="first"><span class="anim_wrap">+</span></div>
<div id="second"><span class="anim_wrap"><span class="anim">+</span></span></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句