Javascript 如何在更改对象属性时添加不透明度

我有下一个例子

这是动漫图书馆。 代码片段示例：

const成员=[{
名称：“аааППППааа
}, {
名称：“ааааааааааааа
}, {
名称：“Ааааааааааааааа
}, {
名称：“Пззззззгч”
}, {
名称：“ааззбббзббч”
}, {
名称：“Мщзззззззззг
}, {
名称：“Сааззаазазббазб107
}, {
名称：“Аазззззгч”
}, {
名称：“аззззззгч”
}, {
名称：“ззззззгззззг”
}, {
名称：“аззззбзззбг
}, {
名称：“зззззззззззг
}, {
名称：“Бзззззззззгг”
}, {
名称：“ззззззззг
}];
window.onload=函数（）{
const button=document.getElementById（'start'）；
如果（按钮）{
button.addEventListener（'click'，（）=>rollNames（document.querySelector（'.name'），members））；
}
函数rollNames（domNode，names）{
常量animatedName={value:0}；
让名字；
if（domNode）{
动画({
目标：[animatedName，domNode]，
值：names.length-1，
第二轮：1，
宽松：“easeInOutCirc”，
持续时间：5000，
更新：职能（a）{
if（name！=names[animatedName.value].name）{
a、 动画[1]。target.style.opacity=0；
}否则{
a、 动画[1]。target.style.opacity=1；
}
domNode.innerText=名称[animatedName.value].name；
name=names[animatedName.value].name；
}
});
//返回动画。完成；
}
}
}

你好
开始滚动

这花了我一段时间，但我想我终于找到了你想要的东西。你将不得不把它弄得更糟一点，以使它更完美，但我认为它非常接近你所要求的。我所做的几件事是将其变为线性，并将持续时间变为14000（14个名称，每秒1个名称）。然后，我使用jquery的animate对每个名称进行某种淡入/淡出。你将不得不调整一点时间，但我认为基本上这是一个很好的例子，你所要求的（我希望）。此外，这是修改后的代码笔：

const成员=[{
名称：“аааППППааа
}, {
名称：“ааааааааааааа
}, {
名称：“Ааааааааааааааа
}, {
名称：“Пззззззгч”
}, {
名称：“ааззбббзббч”
}, {
名称：“Мщзззззззззг
}, {
名称：“Сааззаазазббазб107
}, {
名称：“Аазззззгч”
}, {
名称：“аззззззгч”
}, {
名称：“ззззззгззззг”
}, {
名称：“аззззбзззбг
}, {
名称：“зззззззззззг
}, {
名称：“Бзззззззззгг”
}, {
名称：“ззззззззг
}];
window.onload=函数（）{
const button=document.getElementById（'start'）；
如果（按钮）{
button.addEventListener（'click'，（）=>rollNames（document.querySelector（'.name'），members））；
}
函数rollNames（domNode，names）{
常量animatedName={value:0}；
让名字；
if（domNode）{
动画({
目标：[animatedName，domNode]，
值：names.length-1，
第二轮：1，
“线性”，
持续时间：14000，
更新：职能（a）{
if（name！=names[animatedName.value].name）{
$（a.animatables[1].target）.animate（{opacity:'+=1'}，500）
如果（a.animatables[1].target.style.opacity>0）{
$（a.animatables[1].target）.animate（{opacity:'-=1'}，500）//淡出
}
否则{
$（a.animatables[1].target）.animate（{opacity:'+=1'}，500）//淡入
$（a.animatables[1].target）.animate（{opacity:'-=1'}，500）//淡出
}
}
否则{
}
domNode.innerText=名称[animatedName.value].name；
name=names[animatedName.value].name；
}
});
//返回动画。完成；
}
}
}

开始滚动

无法加载代码笔。无限加载He forget a}在JS的结尾，抱歉，我修复了它。非常感谢这个例子，不幸的是，这不是我想要的，因为没有我真正需要缓解的效果：“easeInOutCirc”闪光效果必须是更改名称的时间。你的问题是如何使从名称到名称的过渡平稳。使用示例中的设置，名称之间的转换变得太快，无法平滑。5秒循环14个名称，非线性将永远不会平滑，因为没有足够的时间使其平滑。正如我在我的例子中所说的，14秒每秒一个名字足够让每个名字都有一个平滑的淡入/淡出效果。