如何解决用JS动画文本内容
以下代码使div的文本内容在向下滑动时消失。 当它仍在滑动时,如何从上方替换它的内容? 我的代码这样做是在不替换新内容的情况下进行的,我只是不知道为什么? 我的目标和想法不仅是替换文本内容,还包括在动画过程中这样做。
var changeText = function(id,newText){
item = document.querySelector(id);
item.animate([
// keyframes
{ transform: 'translateY(0px)',opacity: '1' },{ transform: 'translateY(1px)',opacity: '0.9' },{ transform: 'translateY(4px)',opacity: '0.7' },{ transform: 'translateY(9px)',opacity: '0.5'},{ transform: 'translateY(14px)',opacity: '0.3' },{ transform: 'translateY(20px)',content: newText}
],{
// timing options
duration: 500,});
}
解决方法
您可以在第一个动画完成后立即开始另一个动画。 但是在开始第二个动画之前,您可以更改文本。
var changeText = function(id,newText){
item = document.querySelector(id);
// item.animate(...) returns an Animation (refer to https://developer.mozilla.org/en-US/docs/Web/API/Element/animate)
let animation = item.animate([
// keyframes
{ transform: 'translateY(0px)',opacity: '1' },{ transform: 'translateY(1px)',opacity: '0.9' },{ transform: 'translateY(4px)',opacity: '0.7' },{ transform: 'translateY(9px)',opacity: '0.5'},{ transform: 'translateY(14px)',opacity: '0.3' }
],{
// timing options
duration: 500,});
/* The Animation has an eventHandler
refer to here: https://developer.mozilla.org/en-US/docs/Web/API/Animation
and here: https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish
*/
animation.onfinish = function() {
// change text
item.innerText = newText;
// and start the second animation
item.animate([
// keyframes
{ transform: 'translateY(14px)',opacity: '0.3' },opacity: '0.5' },opacity: '0.9'},{ transform: 'translateY(0px)',opacity: '1' }
],});
};
}
<button onClick="changeText('#txt','newTxt')">
Click me!
</button>
<div id="txt">
Initial Text
</div>
,
请忽略“类型”,“格式编号”。它们与我的问题无关。
var changeText = function(id,text,type){
item = document.querySelector(id);
item.animate([
// keyframes
{ transform: 'translateY(0px)',{ transform: 'translateY(20px)',{
// timing options
duration: 400,});
window.setTimeout(()=>{
item.style.display = "none";
document.querySelector(id).textContent = formatNumber(text,type);
item.style.display = "block";
item.animate([
// keyframes
{ transform: 'translateY(-20px)',opacity: '0' },{ transform: 'translateY(-14px)',{ transform: 'translateY(-9px)',{ transform: 'translateY(-4px)',opacity: '0.7'},{ transform: 'translateY(1-1px)',opacity: '1' }
],{
// timing options
duration: 400,});
},400);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。