Question

我有一个我见过的最奇怪的问题 - 希望你能帮助我们。

我在我的Chrome打包应用程序中进行彩虹文本转换。你可以看到它

＆＃13;

// script2.js
var box = document.getElementById('kalreg');
box.addEventListener('transitionend', loopTransition, false )

function loopTransition(e) {
  if ( e.propertyName == 'color' ) {
    console.log('aa');

    if (box.className == "it-animate") {
      console.log('bb');
      $(box).removeClass("it-animate")
    } else {
      box.className = "it-animate";
      console.log('cc');
    }
  }
}

box.className = ''

＆＃13;

.it-wrapper{
  padding: 30px;
  text-align: center;
  max-width: 1140px;

}
.it-wrapper h3{
  font-size: 130px;
  line-height: 150px;
  padding: 30px 30px 40px;
  color: rgba(255,255,255,0.1);
  font-family: 'guanine', 'Arial Narrow', Arial, sans-serif;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
  background: -webkit-linear-gradient(left,	rgba(105,94,127,0.54) 0%,
    rgba(255,92,92,0.57) 15%,
    rgba(255,160,17,0.59) 27%,
    rgba(252,236,93,0.61) 37%,
    rgba(255,229,145,0.63) 46%,
    rgba(111,196,173,0.65) 58%,
    rgba(106,132,186,0.67) 69%,
    rgba(209,119,195,0.69) 79%,
    rgba(216,213,125,0.7) 89%,
    rgba(216,213,125,0.72) 100%), 
    -webkit-repeating-linear-gradient(-45deg, rgba(255,255,255,0.9), transparent 20px, rgba(255,255,255,0.3) 40px);

  background-size: 300% 100%;
  background-position: center left, top left;

  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;

  transition: all 2s ease;

  -moz-border-radius: 90px 15px;
  -moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4); 
}
.it-wrapper h3.it-animate{
  background-position: center right, top right;
  color: rgba(255,137,149,0.7);
  -moz-box-shadow: 0px 0px 0px 10px rgba(39,137,149, 0.9);

}





input {
  width: 100%;
}

@font-face {
  font-family: guanine;
  src: local(guanine), url('fonts/guanine_.ttf') format('opentype');
}

＆＃13;

<div class="it-wrapper">
  <h3 class="it-animate" id="kalreg">text</h3>
</div>

＆＃13;

在jsfiddle工作： fiddle

如果按＆＃34;运行＆＃34;彩虹会动。这是最奇怪的部分。在我的电脑上，这个动画并没有开始，虽然文件看起来完全相同，除了一个小差异 - 我包括script2.js（在小提琴的html文件中注释）而不是html文件中的原始javascript。但有一种方法可以在电脑上启动动画。我需要做的只是在javascript中的最后一行看起来像这样：

box.className = ''

这样的东西：

setTimeout(function () { box.className = ''}, 0)

我不知道这里发生了什么，特别是昨天一切正常。有任何想法吗？我整个晚上坐在这里，无法找到任何理由为什么会这样。

Kalreg

javascript中的转换不会启动

0 个答案: