Adding entrances for also

src/popup.css

@@ -74,6 +74,8 @@
   0px 2px 4px -1px rgba(0, 0, 0, 0.05),
   0px 0px 0px 3px var(--color-l-alpha-gray);
   --text-input-shadow-active: inset 0px 1px 0px 0px rgba(255, 255, 255, 1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.04), 0px 1px 6px 0px rgba(0, 0, 0, 0.07);
+
+  --hide-speed: .2s;
 }
 
 input, select {
@@ -151,16 +153,7 @@ label {
   margin-top: 8px;
   margin-left: 18px;
   gap: 6px;
-  height: 0;
-  transition: .5s;
-}
-
-#other.show-other {
-  height: 297px; /* Height of other options */
-}
-
-#header-pov.show-other {
-  margin-top: 16px;
+  height: 297px;
 }
 
 #other li {
@@ -190,21 +183,35 @@ label {
   align-items: center;
   gap: 6px;
   margin-top: 6px;
+  height: 26px;
 }
 
 .lhs {
   text-align: right;
 }
 
-#also > li > button {
+
+.delete {
+  color: var(--icon-color);
   background-color: transparent;
   width: fit-content;
   margin: 0;
   padding: 0;
+  border: 0;
+  box-shadow: 0;
+  visibility: block;
+  scale: 1;
+  transition: all .1s allow-discrete;
+}
+
+.delete:hover, .delete:focus {
+  color: var(--icon-color-hover);
+  outline: none;
 }
 
 .hide-button > button {
   visibility: hidden;
+  scale: 0;
 }
 
 body {
@@ -267,7 +274,7 @@ button:not(.delete) {
   text-align: center;
 }
 
-button > svg {
+button:not(.delete) > svg {
   transform: translateY(-.15em);
 }
 
@@ -408,25 +415,6 @@ label {
   text-align: right;
 }
 
-#also > li > button {
-  color: var(--icon-color);
-  background-color: transparent;
-  width: 24px;
-  height: 24px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  box-shadow: 0;
-}
-
-#also > li > button:hover {
-  color: var(--icon-color-hover);
-}
-
-.hide-button > button {
-  visibility: hidden;
-}
-
 
 
 /* Links section */
@@ -450,3 +438,24 @@ a {
 a:hover{
   color: var(--text-color);
 }
+
+
+.hide {
+  height: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  overflow: hidden !important;
+  opacity: 0 !important;
+}
+
+.unhide {
+  transition:
+    height var(--hide-speed) ease-out,
+    padding-top var(--hide-speed) ease-out,
+    padding-bottom var(--hide-speed) ease-out,
+    margin-top var(--hide-speed) ease-out,
+    margin-bottom var(--hide-speed) ease-out,
+    opacity var(--hide-speed) linear !important;
+}

src/popup.html

@@ -40,7 +40,7 @@
             </select>
           </div>
 
-          <ul id="other">
+          <ul id="other" class="hide unhide">
             <li>
               <label for="subjective">Subjective</label>
               <input type="text" id="subjective" name="subjective" placeholder="e.g. he, they">

src/popup.js

@@ -160,6 +160,7 @@ function saveAlso() {
 /* Creates the HTML for a new also replacement */
 function createLi(index) {
   const li = document.createElement("li");
+  li.classList.add("unhide");
 
   const lhs = document.createElement("input");
   lhs.type = "text";
@@ -203,13 +204,27 @@ function addLi() {
   setFinal(this.parentNode, false);
   setFinal(li, true);
   document.querySelector("#also").append(li);
+
+  li.classList.add("hide");
+  requestAnimationFrame(() => {
+    li.classList.remove("hide")
+  })
 }
 
 /* Removes an item from the list of also replacements */
-function removeLi() {
-  document.querySelector("#also").removeChild(this.parentNode);
-  const also = document.querySelector("#also").querySelectorAll("li");
-  also.forEach((li, index) => {
+async function removeLi() {
+  this.parentNode.classList.add("hide");
+  let fields = this.parentNode.querySelectorAll("input, button");
+  fields.forEach((field) => {
+    field.disabled = true;
+  });
+
+  await sleep(200); /* TODO make 300 different if reduced motion */
+
+  let also = document.querySelector("#also");
+  also.removeChild(this.parentNode);
+  let list = also.querySelectorAll("li");
+  list.forEach((li, index) => {
     lhs = li.querySelector(".lhs");
     lhs.id = "lhs-" + index;
     lhs.name = lhs.id;
@@ -245,16 +260,25 @@ function setFinal(li, isFinal) {
 /* Displays more options for pronouns if "other" is selected */
 function showOther() {
   let other = document.querySelector("#other");
-  let headerPov = document.querySelector("#header-pov");
+  let fields = other.querySelectorAll("input, select");
   if (document.querySelector("#preset").value == "other") {
-    other.classList.add("show-other");
-    headerPov.classList.add("show-other");
+    other.classList.remove("hide");
+    fields.forEach((field) => {
+      field.disabled = false;
+    });
   } else {
-    other.classList.remove("show-other");
-    headerPov.classList.remove("show-other");
+    other.classList.add("hide");
+    fields.forEach((field) => {
+      field.disabled = true;
+    });
   }
 }
 
+/* Sleep */
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 /* Required by then */
 function logError(error) {
   console.log(`Error: ${error}`);