提问者:小点点

如何在文本更改时应用<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; }
  } 

共2个答案

匿名用户

您必须将此类任务的自定义事件与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/

匿名用户

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