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

Question

我有一个<div>, 来显示文本。并为<div>. 我想<div>在更改文本时设置动画。我如何更改cssHTML  <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 组件绑定：

 $(document).on('contentchanged', '#location-name', function() {

      alert('woo');

    });

$('#location-name').trigger('contentchanged');

在此示例中，一旦您的内容更新，您将看到一个警报，您可以将警报代码替换为您的自定义代码。

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

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

</div>

触发事件：- 当下面的行执行自定义事件将是一个触发器

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

[更新小提琴] https://jsfiddle.net/niteshsharma/wgqc69s8/1/

Answer 2

我有一个简单的例子。

HTML

 <div class="data-container" id="first-container">

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

        <div id="location-name" class="run-animation">Hello</div>

  </div>

 </div>

 

 <script>

 setInterval(myFunction, 3000)

 var a = 1

 

 

 function myFunction(){

 locationname = document.getElementById('location-name');

 locationname.classList.remove("run-animation");

 void locationname.offsetWidth;

 locationname.classList.add("run-animation");

 

 locationname.innerHTML = "Hello"+a

 

 a++

 }

</script>

CSS

#location-name {

    background:#003344;

    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;

    

}

.run-animation {

  /* position: relative; */

  animation: fade-in 2s linear;

}

@keyframes fade-in {

   0%{

   color:black;

  }

  30%{

  color:blue;

  }

  80%{

  color:green

  }

 

  

   from { opacity: 0; }

    to { opacity: 1; }

  }

  

  @keyframes fade-out {

    from { opacity: 1; }

    to { opacity: 0; }

  } 

Answer 3

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

Answer 4

function addText() {

  const elem = document.getElementById('location-name')

  setTimeout(() => {

    elem.innerText = "Hello"

    elem.classList.add('animate-text')

  }, 10);

  

  // REMOVE CLASS & TEXT TO VISUALIZE EFFECT

  elem.innerText = ""

  elem.classList.remove('animate-text')

}

#location-name {

  align-self: center;

  width: 540px;

  max-height: 100px;

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

  font-size: 42px;

  line-height: 50px;

  height: 50px;

  overflow: hidden;

  text-overflow: ellipsis;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}

.animate-text {

  animation: fade-in 1s;

}

@keyframes fade-in {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

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

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

</div>

<button onclick="addText()">Add text</button>