我有一个 HTML CSS
您必须将此类任务的自定义事件与js中的HTML组件绑定: 在本例中,一旦内容更新,您将看到一个警报您可以用自定义代码替换警报代码。 触发事件:-当低于行时,执行自定义事件将是一个触发器 [更新小提琴]https://jsfiddle.net/niteshsharma/WGQC69S8/1/
您还可以在更改内容后立即使用JavaScript重新启动动画。 查看本教程:https://css-tricks.com/restart-css-animation/ <div id="location-name-container">
<div id="location-name"></div>
</div>
document.getElementById('location-name').innerHTML = "Hello"
#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个答案
$(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"
相关问题