CSS动画中断转换 [英] CSS Animation break transform

问题描述

我的CSS文件有点问题.我尝试制作一个缩放到无限的图标(有效)，当我单击图标时，动画将父级旋转到90deg，图标旋转到45deg(有效).但是，如果我结合两种行为，图标的旋转将中断.我要旋转45deg的图标，并保留动画.

I have a little problem with my CSS file. I try to make an icon that scale to infinite (works), and when I click on icon, an animation rotate the parent to 90deg and the icon rotate to 45deg (works). But, if I combine the 2 behavior, the rotate of icon break. I want rotate the icon of 45deg, and keep the animation.

一个演示示例: https://codepen.io/KevinPy/pen/ooEbKY?editors = 1100

在我的演示中，第一次出现是旋转到45度.第二次出现时添加了动画(通过类)，但旋转是中断.

In my demo, the first occurence works with the rotate to 45deg. The second occurence add the animation (via class), but the rotate is break.

谢谢您的回答.

HTML

<div id="first"><span>+</span></div>
<div id="second"><span class="anim">+</span></div>

SCSS

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 属性.您可以添加周围的元素:

Your animation overrides the transform attribute. You could add a surrounding element:

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>

这篇关于CSS动画中断转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！