CSS动画无法正确使用PHP数组中的JavaScript变量
我有一个脚本，可以从PHP获取一个对象数组 我能够将脚本的结果输出到Div中，以便在我的站点上显示 接下来我有一些CSS动画，只有当变量的长度大于div width时才会出现动画。。。我遇到的问题是，当我将脚本与CSS动画合并时，动画不起作用，但在下面的JSFIDLE测试中它确实起作用： （我目前只在FIREFOX中使用此功能，但稍后将添加其他浏览器支持） 在测试中，您可以看到我创建了两个变量，一个比div宽度短，一个比div宽度长。一切都正常工作，超过div宽度的信息按预期来回反弹 下面是我有问题的脚本，它从JSON编码的PHP数组中获取一个对象数组。函数“getPlayList”循环遍历JSON对象的元素，我使用“document.getElementById”来命名元素，以便在我的HTML代码中使用它们，然后设置一个计时器以每秒刷新一次 但是当我使用my脚本时，会显示变量信息，但是没有动画但是当我在上面看到的JSFIDLE中模拟我的脚本时，一切正常，我有点不明白为什么会发生这种情况，但问题似乎完全与my脚本有关： 我的脚本CSS动画无法正确使用PHP数组中的JavaScript变量,javascript,php,css,json,animation,Javascript,Php,Css,Json,Animation,我有一个脚本，可以从PHP获取一个对象数组 我能够将脚本的结果输出到Div中，以便在我的站点上显示 接下来我有一些CSS动画，只有当变量的长度大于div width时才会出现动画。。。我遇到的问题是，当我将脚本与CSS动画合并时，动画不起作用，但在下面的JSFIDLE测试中它确实起作用： （我目前只在FIREFOX中使用此功能，但稍后将添加其他浏览器支持） 在测试中，您可以看到我创建了两个变量，一个比div宽度短，一个比div宽度长。一切都正常工作，超过div宽度的信息按预期来回反弹 下面是我
function getPlaylist() {
var xmlhttp,
timer;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
try {
var list = JSON.parse(xmlhttp.responseText);
if (list && typeof list === 'object') {
for (var i = 0; i < list.length; i++) {
var currentItem = list[i];
document.getElementById("list0artist").innerHTML=list[0].artist;
document.getElementById("list0title").innerHTML=list[0].title;
}
}
} catch(e) {
throw new Error("Bad response...");
}
}
};
xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
xmlhttp.send();
timer = setTimeout(getPlaylist, 1000);
}
<!doctype html>
<html><head>
<script src="/testsite/AlternativeSecondPlaylist.js"></script>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style type="text/css">
#wrapper {
width: 257.4px;
height: 41.85px;
overflow: hidden;
background-color: #383838;
color: #FFFFFF;
line-height: 41.85px;
font-size: 80%;
font-family: baumans;
color: #FFFFFF;
position:relative;
}
.nowPlayNoAnimate {
position:absolute;
white-space:nowrap;
overflow: hidden;
}
.nowPlayAnimate {
-moz-animation-duration: 2s;
-moz-animation-name: slidein;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-timing-function: linear;
}
@-moz-keyframes slidein {
from {
transform:translateX(0);
}
to {
transform:translateX(calc(-100% + 257px)); /* -100% + parent width */
}
}
</style>
<body onload="getPlaylist()">
<div id="wrapper">
<div id="list0artist" class="nowPlayNoAnimate"></div>
</div>
<div id="wrapper">
<div id="list0title" class="nowPlayNoAnimate"></div>
</div>
<script>
var animate = document.getElementsByClassName('nowPlayNoAnimate');
for (var i = 0; i < animate.length; i++) {
if (animate[i].parentNode.offsetWidth < animate[i].offsetWidth) {
animate[i].classList.add("nowPlayAnimate");
}
}
</script>
</body>
</html>
无标题文件
#包装纸{
宽度：257.4px；
高度：41.85px；
溢出：隐藏；
背景色：#3838；
颜色：#FFFFFF；
线高：41.85px；
字号：80%；
字体系列：baumans；
颜色：#FFFFFF；
位置：相对位置；
}
.nowPlayNoAnimate{
位置：绝对位置；
空白：nowrap；
溢出：隐藏；
}
.NowPlay动画{
-moz动画持续时间：2s；
-moz动画名称：slidein；
-moz动画迭代次数：无限；
-moz动画方向：交替；
-moz动画计时功能：线性；
}
@-moz关键帧幻灯片{
从{
变换：translateX（0）；
}
到{
变换：translateX（计算（-100%+257px））；/*-100%+父宽度*/
}
}
var animate=document.getElementsByClassName（'nowplaynanimate'）；
对于（var i=0；ixmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
try {
var list = JSON.parse(xmlhttp.responseText);
if (list && typeof list === 'object') {
for (var i = 0; i < list.length; i++) {
var currentItem = list[i];
document.getElementById("list0artist").innerHTML=list[0].artist;
document.getElementById("list0title").innerHTML=list[0].title;
var animate = document.getElementsByClassName('nowPlayNoAnimate');
for (var i = 0; i < animate.length; i++) {
if (animate[i].parentNode.offsetWidth < animate[i].offsetWidth) {
animate[i].classList.add("nowPlayAnimate");
}
}
}
}
} catch(e) {
throw new Error("Bad response...");
}
}
};
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
试一试{
var list=JSON.parse（xmlhttp.responseText）；
if（list&&typeof list==='object'）{
对于（变量i=0；i我还强烈建议，不要立即发送ajax请求，因为这可能会显著降低服务器的速度。假设有1000人在浏览器选项卡中打开页面12小时，从那以后，你每秒将有100个请求。你确定在填充
list0artistlist0title