0

我有这个动画：http ://codepen.io/tiamat/pen/Jrdvx 当彩色圆圈变成黑色时，它会重新启动动画。当它没有进入它时，它会带我到 circle.com 网站。我可以停止这两个动作吗？如果成功，我想不要重新启动动画，而是将彩色圆圈保持在黑色圆圈中。

html:

<div id="intreg" style="border:1px solid #000000; width:750px; height: 550px;" >
 <div id="jos">
  <div id="square_drop"ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
     <div id="circle_drop"ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
</div>
  <div id="sus">
<div id="triangle_drop"ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

 <div id="square" draggable="true"ondragstart="return dragStart(event)"></div>
     <div id="circle" draggable="true"ondragstart="return dragStart(event)"></div>
<div id="triangle" draggable="true"ondragstart="return dragStart(event)"></div>
  </div>

</div>

javascript:

function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,100,100);
   return true;
}
function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
     event.preventDefault();
}
function dragDrop(ev) {
   var data = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data));
   ev.stopPropagation();
   return false;
}

CSS：

#square { 
-webkit-animation: move4 3s forwards linear ;
    -moz-animation: move4 3s forwards  linear ;
    -o-animation: move4 3s forwards linear ;
}

@-webkit-keyframes move4 {
    0% {margin-bottom: -400px;margin-left:-100px;}
    100% {margin-top: -130px;margin-left: 400px;}
}
@-moz-keyframes move4 {
0% {margin-top: 1400px;margin-left:-100px;}
    100% {margin-top: 30px;margin-left: 400px;}
}
@-o-keyframes move4 {
0% {margin-bottom: -400px;margin-left:-100px;}
    100% {margin-top: -130px;margin-left: 400px;}
}
#circle {
-webkit-animation: move5 3s forwards linear ;
    -moz-animation: move5 3s forwards  linear ;
    -o-animation: move5 3s forwards linear ;}
@-webkit-keyframes move5 {
    0% {margin-top: 1000px;margin-left:-100px;}
    100% {margin-top: -40px;margin-left: 150px;}
}
@-moz-keyframes move5 {
0% {margin-top: 1000px;margin-left:-100px;}
    100% {margin-top: -40px;margin-left: 150px;}
}
@-o-keyframes move5 {
0% {margin-top: 1000px;margin-left:-100px;}
    100% {margin-top: -40px;margin-left: 150px;}
}
#triangle { 
  -webkit-animation: move6 3s forwards linear ;
    -moz-animation: move6 3s forwards  linear ;
    -o-animation: move6 3s forwards linear ;
}
@-webkit-keyframes move6 {
0% {margin-top: 1000px;margin-left:-100px;}
    100% {margin-top: -120px;margin-left: 20px;}
}
@-moz-keyframes move6 {
0% {margin-top: 1000px;margin-left:-100px;}
    100% {margin-top: -120px;margin-left: 20px;}
}
@-o-keyframes move6 {
0% {margin-top: 1000px;margin-left:-100px;}
    100% {margin-top: -120px;margin-left: 20px;}
}
4

1 回答 1

1

对于将彩色圆圈放置在黑色圆圈上的情况：当您附加放置的元素时，它会在其新位置重新渲染，包括您在样式中指定的动画。您可以尝试创建一个删除动画的类

#circle.stay {
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
}

并将此类添加到元素中，然后再将其附加到其新主页：

function dragDrop(ev) {
   var data = ev.dataTransfer.getData("Text");
   var el = document.getElementById(data);
   el.className="stay";
   ev.target.appendChild(el);
   ev.stopPropagation();
   return false;
}

对于未命中的情况，为body取消拖动的元素添加一个 ondrop 处理程序

<body ondrop="return false">

密码笔

于 2013-08-24T02:47:53.727 回答