如何在文本更改上应用 <div> 的动画

Question

我有一个<div>, 来显示文本。并为<div>. 我想<div>在更改文本时设置动画。我如何更改css

HTML

  <div id="location-name-container">

         <div id="location-name"></div>

    </div>

    

    document.getElementById('location-name').innerHTML = "Hello"

CSS

#location-name {

    align-self: center;

    width: 540px;

    max-height: 100px;

    color: #FFFFFF;

    -webkit-text-stroke-color: #000000;

    font-size: 42px;

    line-height: 50px;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    animation: fade-in 200ms;   

}

@keyframes fade-in {

    from { opacity: 0; }

    to { opacity: 1; }

  }

  

  @keyframes fade-out {

    from { opacity: 1; }

    to { opacity: 0; }

  } 

单击此处访问示例代码

Answer 1

您必须将此类任务的自定义事件与 js 中的 HTML 组件绑定：&nbsp;$(document).on('contentchanged', '#location-name', function() {&nbsp; &nbsp; &nbsp; alert('woo');&nbsp; &nbsp; });$('#location-name').trigger('contentchanged');在此示例中，一旦您的内容更新，您将看到一个警报，您可以将警报代码替换为您的自定义代码。&nbsp;<div id="location-name-container">&nbsp; &nbsp; &nbsp; <div id="location-name">India</div></div>触发事件：- 当下面的行执行自定义事件将是一个触发器document.getElementById('location-name').innerHTML = "Hello"[更新小提琴]&nbsp;https://jsfiddle.net/niteshsharma/wgqc69s8/1/

Answer 2

我有一个简单的例子。HTML&nbsp;<div class="data-container" id="first-container">&nbsp; &nbsp;<div id="location-name-container">&nbsp; &nbsp; &nbsp; &nbsp; <div id="location-name" class="run-animation">Hello</div>&nbsp; </div>&nbsp;</div>&nbsp;&nbsp;<script>&nbsp;setInterval(myFunction, 3000)&nbsp;var a = 1&nbsp;&nbsp;&nbsp;function myFunction(){&nbsp;locationname = document.getElementById('location-name');&nbsp;locationname.classList.remove("run-animation");&nbsp;void locationname.offsetWidth;&nbsp;locationname.classList.add("run-animation");&nbsp;&nbsp;locationname.innerHTML = "Hello"+a&nbsp;&nbsp;a++&nbsp;}</script>CSS#location-name {&nbsp; &nbsp; background:#003344;&nbsp; &nbsp; align-self: center;&nbsp; &nbsp; width: 540px;&nbsp; &nbsp; max-height: 100px;&nbsp; &nbsp; color: #FFFFFF;&nbsp; &nbsp; -webkit-text-stroke-color: #000000;&nbsp; &nbsp; font-size: 42px;&nbsp; &nbsp; line-height: 50px;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; text-overflow: ellipsis;&nbsp; &nbsp; -webkit-line-clamp: 2;&nbsp; &nbsp; -webkit-box-orient: vertical;&nbsp; &nbsp;&nbsp;}.run-animation {&nbsp; /* position: relative; */&nbsp; animation: fade-in 2s linear;}@keyframes fade-in {&nbsp; &nbsp;0%{&nbsp; &nbsp;color:black;&nbsp; }&nbsp; 30%{&nbsp; color:blue;&nbsp; }&nbsp; 80%{&nbsp; color:green&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;from { opacity: 0; }&nbsp; &nbsp; to { opacity: 1; }&nbsp; }&nbsp;&nbsp;&nbsp; @keyframes fade-out {&nbsp; &nbsp; from { opacity: 1; }&nbsp; &nbsp; to { opacity: 0; }&nbsp; }&nbsp;

Answer 3

您还可以在更改内容后立即使用 JavaScript 重新启动动画。查看本教程：&nbsp;https ://css-tricks.com/restart-css-animation/

Answer 4

function addText() {&nbsp; const elem = document.getElementById('location-name')&nbsp; setTimeout(() => {&nbsp; &nbsp; elem.innerText = "Hello"&nbsp; &nbsp; elem.classList.add('animate-text')&nbsp; }, 10);&nbsp;&nbsp;&nbsp; // REMOVE CLASS & TEXT TO VISUALIZE EFFECT&nbsp; elem.innerText = ""&nbsp; elem.classList.remove('animate-text')}#location-name {&nbsp; align-self: center;&nbsp; width: 540px;&nbsp; max-height: 100px;&nbsp; -webkit-text-stroke-color: #000000;&nbsp; font-size: 42px;&nbsp; line-height: 50px;&nbsp; height: 50px;&nbsp; overflow: hidden;&nbsp; text-overflow: ellipsis;&nbsp; -webkit-line-clamp: 2;&nbsp; -webkit-box-orient: vertical;}.animate-text {&nbsp; animation: fade-in 1s;}@keyframes fade-in {&nbsp; from {&nbsp; &nbsp; opacity: 0;&nbsp; }&nbsp; to {&nbsp; &nbsp; opacity: 1;&nbsp; }<div id="location-name-container">&nbsp; <div id="location-name"></div></div><button onclick="addText()">Add text</button>