Question

该代码上次在Google Chrome浏览器中正常运行，但现在不再起作用。当您在视图中滚动时，这些条将由纯色动画填充（2秒）。 Internet Explorer工作正常。有什么帮助吗？我尝试环顾四周，但无济于事。

.levelPM {
    height:     25px; /* IE CSS Variables Fallback */
    height:     var(--bar-h);
    width:      0px;
    background: #7ae89f; /* IE CSS Variables Fallback */
    background: var(--projectmanage-col);
}

.projectmanage.start {
    -webkit-animation: projectmanage 2s ease-out forwards;
       -moz-animation: projectmanage 2s ease-out forwards;
         -o-animation: projectmanage 2s ease-out forwards;
            animation: projectmanage 2s ease-out forwards;
}

@-webkit-keyframes projectmanage {
    0%   { width: 0px; }
    100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}

@-moz-keyframes projectmanage {
    0%   { width: 0px; }
    100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}

@-o-keyframes projectmanage {
    0%   { width: 0px; }
    100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}

@keyframes projectmanage {
    0%   { width: 0px; }
    100% { width: 90%; /* IE CSS Variables Fallback */ width: var(--projectmanage-perc); }
}

完整代码：https://pastebin.com/TegPh7pf

Answer 1

如果页面没有滚动，Chrome不会触发滚动，请改用“绑定（滚轮）”。

$(window).bind("wheel", function() {
  console.log("asdads")
    checkAnimation2();
});

实时示例：https://codepen.io/dobladov/pen/aXZpNP

为什么我的CSS动画代码无法在Chrome中使用？

1 个答案: