From 60c79cd0cf2d211c98bb4081c1ff781e1eac1865 Mon Sep 17 00:00:00 2001
From: jahugg <jan@huggenberg.ch>
Date: Mon, 27 Feb 2023 11:38:09 +0100
Subject: [PATCH] added animation delay
---
src/main.js | 26 +++++++++++++++++++++++---
src/media/x.svg | 1 +
src/styles/main.css | 15 +++++++++++++++
src/styles/main.less | 29 +++++++++++++++++++++++------
4 files changed, 62 insertions(+), 9 deletions(-)
create mode 100644 src/media/x.svg
diff --git a/src/main.js b/src/main.js
index 88e945e..3f0f682 100644
--- a/src/main.js
+++ b/src/main.js
@@ -152,12 +152,14 @@ function buildPageContents(object) {
// update navigation
function updateNavigation() {
const listEl = document.createElement("ul");
+ const listItems = []; // for setting animation
// add navigation items
for (let key in object.submenu) {
let itemEl = buildNavigationItemEl(object.submenu[key]);
itemEl.classList.add("forward-btn");
listEl.appendChild(itemEl);
+ listItems.push(itemEl);
}
// add "special back" button
@@ -178,17 +180,26 @@ function buildPageContents(object) {
path: "/menu",
command: "back",
});
- else if (depth === 3)
+ else if (depth === 3) {
backItemEl = buildNavigationItemEl({
label: "Exit",
path: "/",
command: "exit",
});
-
+ backItemEl.classList.add("exit-btn");
+ }
backItemEl.classList.add("back-btn");
listEl.appendChild(backItemEl);
+ listItems.push(backItemEl);
}
+ // add animation delay
+ let index = 0;
+ listItems.forEach((item) => {
+ item.style.animationDelay = index * 0.07 + "s";
+ index++;
+ });
+
const navigationEl = document.getElementById("navigation");
navigationEl.replaceChildren(listEl);
@@ -419,7 +430,16 @@ function addVoiceControls() {
var SpeechRecognitionEvent =
SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
- var commands = ["menu", "call", "check", "apps", "open", "back", "close", "exit"];
+ var commands = [
+ "menu",
+ "call",
+ "check",
+ "apps",
+ "open",
+ "back",
+ "close",
+ "exit",
+ ];
var recognition = new SpeechRecognition();
if (SpeechGrammarList) {
diff --git a/src/media/x.svg b/src/media/x.svg
new file mode 100644
index 0000000..d76a0c6
--- /dev/null
+++ b/src/media/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index fedcf7f..28043e6 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -11,8 +11,20 @@
justify-items: center;
align-items: center;
}
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateX(1em);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
.link {
position: relative;
+ opacity: 0;
+ animation: slideIn 0.2s ease-out 1 normal forwards;
}
.link:not(:last-child) {
margin-bottom: 0.4em;
@@ -41,6 +53,9 @@
transform: rotate(180deg);
left: calc(var(--chevron-size) * -1);
}
+.link.exit-btn a:before {
+ background-image: url("/src/media/x.svg");
+}
.link .command {
font-size: 0.4em;
line-height: 1em;
diff --git a/src/styles/main.less b/src/styles/main.less
index 0b90c01..9e2e101 100644
--- a/src/styles/main.less
+++ b/src/styles/main.less
@@ -13,8 +13,21 @@
align-items: center;
}
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateX(1em);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
.link {
position: relative;
+ opacity: 0;
+ animation: slideIn 0.2s ease-out 1 normal forwards;
&:not(:last-child) {
margin-bottom: 0.4em;
@@ -39,7 +52,7 @@
background: url("/src/media/chevron-right.svg") 0% center no-repeat;
background-size: 0.8em;
opacity: 0;
- transition: all .1s ease-out;
+ transition: all 0.1s ease-out;
}
&.back-btn a:before {
@@ -47,6 +60,10 @@
left: calc(var(--chevron-size) * -1);
}
+ &.exit-btn a:before {
+ background-image: url("/src/media/x.svg");
+ }
+
.command {
font-size: 0.4em;
line-height: 1em;
@@ -55,13 +72,13 @@
color: var(--color-grey-01);
&:before {
- content:"";
+ content: "";
display: inline-block;
- width: .8em;
- height: .8em;
- margin-right: .4em;
+ width: 0.8em;
+ height: 0.8em;
+ margin-right: 0.4em;
background: url("/src/media/mic.svg") center center no-repeat;
- background-size: .8em;
+ background-size: 0.8em;
}
}
--
GitLab