我想知道如何将其转换为离子应用程序,我试图这样做它不起作用,我的代码示例任何人都知道如何在Ionic中正确放置该代码
我试着像这个例子
<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>
试试这个:
。.html
<div class="heart is_animating" (click)="toggleClass($event)"></div>
.ts
toggleClass(event){
event.target.classList.toggle('is_animating');
}