Question

我尝试在infoscreen上创建一个正在运行的信息文本。文本从屏幕的右角开始运行，并在左侧离开。这个过程不会递归地重复。

一切似乎都很好用，但是当我在调试后删除警报时，文本不会从右角开始，而是从左侧开始运行。该程序也只运行一次。

HTML：

function setStaticData() {
  sessionStorage.setItem('headerWidth', document.getElementById('header').scrollWidth);
}

function getStaticData() {
  return sessionStorage.getItem('headerWidth');
}

function animation() {

  //get element, its width & time param
  var header = document.getElementById('header');
  var headerWidth = getStaticData();
  var headerTime = header.innerHTML.length * 0.3;
  var windowWidth = window.innerWidth;

  //clean all
  header.style.transition = 'none';
  header.style.marginLeft = windowWidth + 'px';

  alert("baba"); //BAD BOY

  //animate text
  header.style.transition = 'margin linear ' + headerTime + 's';
  header.style.marginLeft = '-' + headerWidth + 'px';

  //wait and repeat
  var delay = headerTime * 1000 + 1000;
  setTimeout(animation, delay);
}

//first call
window.onload = function() {
  setStaticData();
  animation();
};

html {
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  top: 50vh;
  transform: translateY(-50%);
  color: black;
  background-color: #bbc8d9;
}

header {
  font-family: calibri, arial;
  font-weight: 400;
  font-size: 100px;
  white-space: nowrap;
}

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header id="header">+++ News, More News, Another Thing & something else +++</header>
  <script src="functions.js"></script>
</body>

</html>

如果我删除了坏男孩[alert（“baba”）;]它不起作用，就像我上面提到的那样。

我疯了！你能帮帮我吗？

Answer 1

问题是，在Javascript返回主事件循环并呈现页面之前，不会处理对元素样式的更改。如果对样式进行两次分配，则浏览器仅查看最终结果。因此，当您将marginLeft设置为窗口宽度然后将其设置为"-" + headerWidth + "px"时，只会处理第二个更改，以便动画从哪里开始。

alert()导致页面在等待您的响应时呈现（虽然我认为这可能与浏览器有关），这就是为什么它可以使用它。

一个简单的解决方案是将第二个赋值放在setTimeout()中，因此它将在返回后异步执行。

＆＃13;

function setStaticData() {
  //sessionStorage.setItem('headerWidth', document.getElementById('header').scrollWidth);
}

function getStaticData() {
  return document.getElementById('header').scrollWidth; //sessionStorage.getItem('headerWidth');
}

function animation() {

  //get element, its width & time param
  var header = document.getElementById('header');
  var headerWidth = getStaticData();
  var headerTime = header.innerHTML.length * 0.3;
  var windowWidth = window.innerWidth;

  //clean all
  header.style.transition = 'none';
  header.style.marginLeft = windowWidth + 'px';

  //alert("baba"); //BAD BOY

  //animate text
  setTimeout(function() {
    header.style.transition = 'margin linear ' + headerTime + 's';
    header.style.marginLeft = '-' + headerWidth + 'px';
  }, 0);

  //wait and repeat
  var delay = headerTime * 1000 + 1000;
  setTimeout(animation, delay);
}

//first call
window.onload = function() {
  setStaticData();
  animation();
};

＆＃13;

html {
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  top: 50vh;
  transform: translateY(-50%);
  color: black;
  background-color: #bbc8d9;
}

header {
  font-family: calibri, arial;
  font-weight: 400;
  font-size: 100px;
  white-space: nowrap;
}

＆＃13;

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header id="header">+++ News, More News, Another Thing & something else +++</header>
  <script src="functions.js"></script>
</body>

</html>

＆＃13;

Answer 2

请查看下面的代码段。我不会使用sessionStorage，因为它是出于不同的目的而设计的。我没有使用setTimeout等待应用样式。

我启动动画，然后在transitionend事件中重新启动它。

＆＃13;

window.onload = function() {
  var header = document.getElementById('header');
  animation();

  header.addEventListener('transitionend', function() {
    header.style.transition = 'none';
    header.style.transform = 'translateX(0)';
    animation();
  });

  function animation() {
    var t = header.offsetWidth / 70,
      tx = header.scrollWidth;

    header.style.transition = 'transform ' + t + 's linear';
    header.style.transform = 'translateX(-' + tx + 'px)';
  }
};

＆＃13;

html {
  width: 100%;
  overflow: hidden;
  background-color: #bbc8d9;
}

header {
  font: 100px sans-serif;
  white-space: nowrap;
  padding-left: 100%;
}

＆＃13;

<header id="header">+++ News, More News, Another Thing & something else +++</header>

＆＃13;

Answer 3

好的我想我修好了。它的时间问题只是延迟了动画调用。 1秒

function animation() {

            //get element, its width & time param
            var header = document.getElementById('header');
            var headerWidth = getStaticData();
            var headerTime = header.innerHTML.length * 0.3;
            var windowWidth = window.innerWidth;

            //clean all
            header.style.transition = 'none';
            header.style.marginLeft = windowWidth+'px';

            // delay it for 1000ms
            setTimeout( 
            function(){
                //animate text
                header.style.transition = 'margin linear '+headerTime+'s';
                header.style.marginLeft = '-'+headerWidth+'px';    

                //wait and repeat
                var delay = headerTime * 1000 + 1000;
                setTimeout(animation, delay);
            }, 1000);

        }

删除alert（）函数会导致我的代码崩溃

3 个答案: