ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
使用vue实现一个没有卡顿的动画 > Tip:animation-play-state技术要点 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <style> .demo{ width:100px; height: 100px; background: pink; animation: circle 5s linear infinite; } .running{ animation-play-state: running; } .paused{ animation-play-state:paused; } @keyframes circle{ 0%{ transform: rotate(0deg) } 50%{ transform: rotate(180deg) } 100%{ transform: rotate(360deg); } } </style> </head> <body> <div id="app"> <div :class="['demo',isPlay?'running':'paused']" > </div> <button @click="handleClick" style="margin-top: 20px;">切换</button> </div> <script> new Vue({ el:"#app", data:{ isPlay:false }, methods:{ handleClick(){ if(this.isPlay){ this.isPlay = false; }else{ this.isPlay = true; } } } }) </script> </body> </html> ```