KevinMidboe/vinlottis
1
0
Fork 0
Code Issues 8 Pull Requests 14 Packages Projects Releases Wiki Activity

Add pulse class after mount timeout 2sec.

Browse Source
This commit is contained in:
Kevin
2021-04-30 18:37:56 +02:00
parent 7092fb1959
commit f91466f1bf
2 changed files with 30 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/components/VinlottisPage.vue
View File

@@ -94,7 +94,11 @@ export default {
return Notification.permission !== "granted" || !this.pushAllowed || localStorage.getItem("push") == null; return Notification.permission !== "granted" || !this.pushAllowed || localStorage.getItem("push") == null;
} }
}, },
async mounted() { mounted() {
setTimeout(() => {
document.getElementsByClassName("participate-button")[0].classList.add("pulse");
}, 1800);
this.$on("push-allowed", () => { this.$on("push-allowed", () => {
this.pushAllowed = true; this.pushAllowed = true;
}); });
@@ -121,8 +125,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/media-queries.scss"; @import "@/styles/media-queries.scss";
@import "../styles/variables.scss"; @import "@/styles/variables.scss";
@import "@/styles/animations.scss";
.top-container { .top-container {
height: 30em; height: 30em;

22
frontend/styles/animations.scss Normal file
View File

@@ -0,0 +1,22 @@
.pulse {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
transform: scale(1);
animation: pulse 2s infinite;
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
}
70% {
transform: scale(1.02);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
}