Saya cuba mencapai animasi setiap kali saya mengklik butang, ia berfungsi dengan baik pada desktop tetapi saya tidak boleh mencapai kesan yang sama pada mudah alih. Saya perlu mengklik butang dahulu, kemudian klik di tempat lain untuk menyahfokus CSS, kemudian klik butang sekali lagi untuk mendapatkan kesan animasi.
Berikut ialah coretan kod.
.btn_container { warna: #35f8ff; kedudukan: relatif; paparan: inline-block; text-align: tengah; margin: 2.5rem auto; } .prog_btn { text-transform: huruf besar; saiz fon: 1.3rem; padding: 10px 25px; indeks z: 3; warna latar belakang: telus; kursor: penunjuk; peralihan: 0.2s pelonggaran; kedudukan: relatif; margin: auto; } .btn_container .svgStroke { jawatan: mutlak; indeks-z: 1; lebar: 100%; atas: -25%; kiri: 0; } .btn_container .svgStroke path { strok-dasharray: 100; strok-dashoffset: -800; lebar lejang: 2; peralihan: semua 1s mudah masuk; pukulan: #35f8ff; } @keyframes dash { 0% { strok-dasharray: 100; lebar lejang: 2; } 50% { lebar lejang: 4; pukulan: #35f8ff; penapis: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff); } 100% { strok-dashoffset: 800; lebar lejang: 2; } } .prog_btn:hover+.svgStroke path { kursor: penunjuk; animasi: dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .prog_btn:hover { saiz fon: 1.2rem; } .Tambah { paparan: inline-block; jidar kanan: 0.75rem; ketinggian: 1.5rem; lebar: 1.5rem; } Terdapat juga pautan CodePen di sini.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya berharap dapat membatalkan fokus (iaitu kabur) pada penghujung animasi, tetapi ini tidak berjaya.
Berikut ialah penyelesaian yang agak kekok - coretan ini mengalih keluar animasi apabila ia tamat dan menghidupkannya semula apabila terdapat satu lagi acara permulaan sentuh. Ia menggunakan tetapan gaya dan bukannya kelas.
let touchDevice = false; const progBtn = document.querySelector('.prog_btn'); const path = document.querySelector('.prog_btn +.svgStroke path'); path.addEventListener('animationend', function() { path.style.animation = ''; }); progBtn.addEventListener('touchstart', function() { touchDevice = true; path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; }); progBtn.addEventListener('mouseover', function() { path.style.animation = 'dash 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; });.btn_container { color: #35f8ff; position: relative; display: inline-block; text-align: center; margin: 2.5rem auto; } .prog_btn { text-transform: uppercase; font-size: 1.3rem; padding: 10px 25px; z-index: 3; background-color: transparent; cursor: pointer; transition: 0.2s ease-out; position: relative; margin: auto; } .btn_container .svgStroke { position: absolute; z-index: 1; width: 100%; top: -25%; left: 0; } .btn_container .svgStroke path { stroke-dasharray: 100; stroke-dashoffset: -800; stroke-width: 2; transition: all 1s ease-in-out; stroke: #35f8ff; } @keyframes dash { 0% { stroke-dasharray: 100; stroke-width: 2; } 50% { stroke-width: 4; stroke: #35f8ff; filter: drop-shadow(0px 0px 3px #e8615a) drop-shadow(0px 0px 20px #35f8ff) drop-shadow(0px 0px 150px #35f8ff); } 100% { stroke-dashoffset: 800; stroke-width: 2; } } .prog_btn:hover+.svgStroke path { cursor: pointer; } .prog_btn:hover { font-size: 1.2rem; } .add { display: inline-block; margin-right: 0.75rem; height: 1.5rem; width: 1.5rem; }