Question

我需要在用户事件的界面HTML / CSS中链接两个动画（这里只需点击一下文档）。第一个动画正确启动，但是当我想重新启动第二个动画时什么都没动？

我知道如果删除.rotaiotn类并且超时为元素添加其他动画类，则第二个动画从元素的第一个位置开始。

我想知道在第一个动画之后是否存在从蓝球位置开始第二个动画的解决方案？

＆＃13;

document.addEventListener('click', startAnimation, false);
var isFisrtAnim = false;

function startAnimation(evt) {
   var elt = document.querySelector('#blue_ball');
   if (!isFisrtAnim) {
      elt.setAttribute('class', 'rotation');
   } else {
      elt.setAttribute('class', 'rotation2');
   }
   elt.addEventListener("animationend", animationAtEnd, false);
}

function animationAtEnd(evt) {
   evt.preventDefault();
   isFisrtAnim = !isFisrtAnim;
   var elt = evt.target;
   // todo here get new position of elt to start another animation
   // from the new position after first animation
   var new_margin_top = window.getComputedStyle(elt).getPropertyValue('margin-top');
   var new_margin_left = window.getComputedStyle(elt).getPropertyValue('margin-left');
   console.log('At end new margin-top : ' + new_margin_top + ' - new margin-left : ' + new_margin_left);
   // positions are the same of start element ? they are not modify ?
}

＆＃13;

#circleNav {
   background: rgba(215, 229, 231, 0.4) !important;
   margin-top: 100px;
   margin-left: 120px;
   border-radius: 50%;
   width: 335px;
   height: 335px;
   border: 2px solid #0e6694;
}

img {
   max-width: 100%;
}

#blue_ball {
   position: absolute;
   margin-top: -350px;
   margin-left: 165px;
   width: 70px;
   height: 70px;
   border: none;
   z-index: 5;
   transform-origin: 120px 180px;
}

.rotation {
   -webkit-animation: rotation 3s linear;
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards !important;
}

@-webkit-keyframes rotation {
   from {
      -webkit-transform: rotate(0deg);
   }
   to {
      -webkit-transform: rotate(240deg);
   }
}

.rotation2 {
   -webkit-animation: rotation 3s linear;
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards !important;
}

@-webkit-keyframes rotation2 {
   from {
      -webkit-transform: rotate(240deg);
   }
   to {
      -webkit-transform: rotate(360deg);
   }
}

＆＃13;

<h2>
   CLICK ON THE BODY TO START ANIMATION
</h2>
<h4>
   When the Blue ball stop click an other time to start second animation, but don't work ?

</h4>
<div id="circleNav"></div>
<div id="blue_ball">
   <a href="#">
            <img id="btn_menu" src="http://mascaron.net/img/mini_rond_logo.png">
        </a>
</div>

＆＃13;

jsfiddle

上的代码

提前感谢。

Answer 1

只有一个问题，在css中：

.rotation2 {
   -webkit-animation: rotation 3s linear;
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards !important;
}

不应该是：

.rotation2 {
   -webkit-animation: rotation2 3s linear;   /* <----- here, rotation2
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards !important;
}

在js部分中，为什么不使用elem.classList https://developer.mozilla.org/fr/docs/Web/API/Element/classList来操作css类属性。

在第一个动画css的位置开始第二个动画css

1 个答案: