Question

我正在尝试在更改div的内容时重新启动css动画。我已经尝试了所有方法，我可以找到谷歌搜索似乎没有任何工作。我试过了

JQUERY

$("p1").removeClass("content");
$("p1").addClass("content");

JAVASCRIPT

var elm = this,
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);

以及其他一些方法，例如将display设置为none，然后阻止或更改animationName

这是我的代码

HTML

<div id="content">
    <div class="content" id="p1">
        <div class="person"></div>
        <img src="img/saying.png" class="statusclound"/>
        <p class="status"></p>
        <img class="frame" src="img/splash_1.png" id="frame_1"/>

    </div>
</div>

CSS

.content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;

            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }

@keyframes buzz-out {
            10% {
                -webkit-transform: translateX(3px) rotate(2deg);
                transform: translateX(3px) rotate(2deg);
            }
            20% {
                -webkit-transform: translateX(-3px) rotate(-2deg);
                transform: translateX(-3px) rotate(-2deg);
            }
            30% {
                -webkit-transform: translateX(3px) rotate(2deg);
                transform: translateX(3px) rotate(2deg);
            }
            40% {
                -webkit-transform: translateX(-3px) rotate(-2deg);
                transform: translateX(-3px) rotate(-2deg);
            }
            50% {
                -webkit-transform: translateX(2px) rotate(1deg);
                transform: translateX(2px) rotate(1deg);
            }
            60% {
                -webkit-transform: translateX(-2px) rotate(-1deg);
                transform: translateX(-2px) rotate(-1deg);
            }
            70% {
                -webkit-transform: translateX(2px) rotate(1deg);
                transform: translateX(2px) rotate(1deg);
            }
            80% {
                -webkit-transform: translateX(-2px) rotate(-1deg);
                transform: translateX(-2px) rotate(-1deg);
            }
            90% {
                -webkit-transform: translateX(1px) rotate(0deg);
                transform: translateX(1px) rotate(0deg);
            }
            100% {
                -webkit-transform: translateX(-1px) rotate(0deg);
                transform: translateX(-1px) rotate(0deg);
            }
        }

JAVASCRIPT

function test() {
        var currentPatch = document.getElementById("p" + patchTurn);           

        currentPatch.getElementsByClassName("person")[0].style.backgroundImage = "url(http://localhost:80/slingshot/uploads/" + jsonData[3] + ")";
        currentPatch.getElementsByClassName("status")[0].innerHTML = jsonData[2];
        currentPatch.getElementsByClassName("frame")[0].src = "img/splash_" + randomFrame + ".png";
        currentPatch.style.animationName = "buzz-out";
        currentPatch.style.display = "block";
    }

因此，当页面加载div被禁用并且test()函数运行并且div动画时，但是当我更改该div中的某些内容并重新运行test()函数时，它不会生成动画。< / p>

Answer 1

我不太清楚你需要帮助的部分，所以我做了一个工作的JSfiddle，显示所有的工作。

我为div中的更改创建了一个事件监听器，并添加了类＆＃34; content-active＆＃34;到了div。此类添加动画名称并将显示设置为阻止。然后删除该类并重新添加以重新启动动画。为了让动画重新启动，我设置了10毫秒的延迟。（如果您愿意，也可以克隆div）

https://jsfiddle.net/heraldo/zyjuoLt1/

JS：

// watch for changes in the DOM
$('#content').bind("DOMSubtreeModified",function(){
    // clear any previous animation
    $("#p1").removeClass("content-active");
  // setting a timeout allows the animation to restart
  // NOTE, you can also clone the element and re-add it to do
  // the same thing.
  setTimeout(function(){ $("#p1").addClass("content-active"); }, 10);
});

// simply adds text to the status <p>
$('#modify').click(function(){
    $(".person").append('text ');
});

CSS：

#content {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

.content-active{
  display: block;
  animation-name: buzzOut;
}



@keyframes buzzOut {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0deg);
    transform: translateX(1px) rotate(0deg);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0deg);
    transform: translateX(-1px) rotate(0deg);
  }
}

HTML：

<!-- simply adds text to the div -->
<button id="modify">Add Text</button> 

<div id="content">
  <div class="content" id="p1">
    <div class="person"></div>
    <p class="status"></p>
  </div>
</div>

请告诉我这是否适合您！

无法重新启动动画

1 个答案: