如何让div在JS中使用和if/else执行其样式动画

Question

你好，这是我当前的html代码：

<div data-jibp="" data-jiis="uc" id="easter-egg" style="display:none;">
    <style>
    @keyframes roll {
        100%{transform:rotate(360deg)}}
        body{-webkit-animation-name:roll;
        -webkit-animation-duration:4s;
        -webkit-animation-iteration-count:1;
    }
    </style>
</div>

我从谷歌的复活节彩蛋里拿来的。我想知道，当我在文本框中输入某个名称时，如何才能使此动画出现。Google有这样的设置，当用户输入"Do a barrel roll“时，它就会执行这些风格的动画。如何使用if/else在javascript中执行此操作

请帮助和感谢:)

编辑：

(function barrel() {
    var css = document.createElement('style');
    css.type = 'text/css';
    css.innerHTML = '@-moz-keyframes roll{100%25{-moz-transform:rotate(360deg);}}@-o-keyframes roll{100%25{-o-transform:rotate(360deg);}}@-webkit-keyframes roll{100%25{-webkit-transform:rotate(360deg);}}body{-moz-animation-name:roll;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-o-animation-name:roll;-o-animation-duration:4s;-o-animation-iteration-count:1;-webkit-animation-name:roll;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;}';
    document.getElementsByTagName('head')[0].appendChild(css)
    return css.innerHTML;
})();

这是运行桶滚动的函数，我尝试在if/else语句中调用它，但它似乎不起作用。有什么想法吗？(Ps。Cassidy谢谢你的建议，但这不是我的意思)

Answer 1

假设您使用的是jQuery (查看问题中的标记)：

​

function barrel() {
    var css = document.createElement('style');
    css.type = 'text/css';
    css.innerHTML = '@-moz-keyframes roll{100%25{-moz-transform:rotate(360deg);}}@-o-keyframes roll{100%25{-o-transform:rotate(360deg);}}@-webkit-keyframes roll{100%25{-webkit-transform:rotate(360deg);}}body{-moz-animation-name:roll;-moz-animation-duration:4s;-moz-animation-iteration-count:1;-o-animation-name:roll;-o-animation-duration:4s;-o-animation-iteration-count:1;-webkit-animation-name:roll;-webkit-animation-duration:4s;-webkit-animation-iteration-count:1;}';
    document.getElementsByTagName('head')[0].appendChild(css)
    return css.innerHTML;
}

$('input').on('change', function() {
  if (this.value === 'Do a barrel roll') {
    barrel();
  }
});

​

去掉barrel()函数周围的括号，因为它会立即调用该函数，而这并不是您想要的。

Answer 2

如果你想要JS小提琴，请查看下面的JS fiddle - Fiddle

HTML -

<div data-jibp="" data-jiis="uc" id="easter-egg">Egg</div>
<input type="text" id="easter-input" />

JS -

document.getElementById('easter-input').addEventListener('keyup',function(e){
 if(e.target.value=="Do a barrel roll")
 document.getElementById('easter-egg').className = "eggAnim"
 else
 document.getElementById('easter-egg').className = ""
});

CSS -

 @keyframes roll { 
 100%  {transform:rotate(360deg)
 }}

#easter-egg{
 display:none
}
#easter-egg.eggAnim{
 display:block;
 -webkit-animation-name:roll;
 -webkit-animation-duration:4s;
 -webkit-animation-iteration-count:1
 }