JS：想要点击按钮动画

Question

我想点击按钮动画/颜色化div＆＃39; Animate＆＃39; 你可以测试我的代码并建议一些更改或添加一些代码吗？

我的代码如下： -

＆＃13;

＆＃13;

.anime {
  animation: coloranimate 5s;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="anime">
</div>
<button>Animate</button>

＆＃13;

＆＃13;

＆＃13;

我想使用动画按钮为div设置动画/颜色。

Answer 1

单击按钮可以使用.addClass()，添加包含动画属性的类后，动画将自动启动。

请参阅代码段：

＆＃13;

＆＃13;

$('button').click(function() {
  $('#anime').addClass("anime");
});

＆＃13;

#anime {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

.anime {
  animation: coloranimate 5s;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime">
</div>
<button>Animate</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在这里你必须添加jquery来实现你的需求。

尝试使用此代码可能会对您有所帮助。

修改

用普通的javascript。

function addAnime() {
var classadd = document.getElementById('anime');
classadd.className = 'anime';
}

.anime {
  animation: coloranimate 5s;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="">
</div>
<button onclick="addAnime()">Animate</button>

Answer 3

在d = {'M': 10**6, 'B':10**9} #same solution print (df) Country Sales Assets 0 China 4.000000e+09 3.200000e+11 1 China 3.000000e+09 1.250000e+11 2 India 1.120000e+08 1.000000e+11 3 USA 3.900000e+07 2.000000e+11 元素上通过javascript添加一个类，然后该元素具有动画...

#anime

$('.myButton').on('click', function(){
    $('#anime').addClass('animate-now');
});

.anime {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
}

@keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

@-webkit-keyframes coloranimate {
  from {
    background: green;
  }
  to {
    background: yellow;
    border: 4px solid black;
  }
}

.anime.animate-now {
  animation: coloranimate 5s;
}