离子动画脚本问题

Question

我想知道如何将其转换为Ionic应用程序我试图做它不起作用，my code sample任何人都知道如何正确地将该代码放入Ionic

我试着像这个example

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


  <div class="heart"></div>

---

<script type="text/javascript">/* when a user clicks, toggle the 'is-animating' class */
/* when a user clicks, toggle the 'is-animating' class */
$(".heart").on('click touchstart', function(){
  $(this).toggleClass('is_animating');
});

/*when the animation is over, remove the class*/
$(".heart").on('animationend', function(){
  $(this).toggleClass('is_animating');
});

</script>



<style>.heart {
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image:url( 'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
}

.heart:hover {
  background-position:right;
}

.is_animating {
  animation: heart-burst .8s steps(28) 1;
}

@keyframes heart-burst {
  from {background-position:left;}
  to { background-position:right;}
}</style>

Answer 1

试试这个：

html的

<div class="heart is_animating" (click)="toggleClass($event)"></div>

.TS

toggleClass(event){
    event.target.classList.toggle('is_animating');
}