www: trasition: opaque

www/app.js

@@ -112,7 +112,7 @@ async function loadSource(source, week) {
   }
 
   document.getElementById('subtitle').innerHTML =
-    source + '<br>' + data[week].start + ' t/m ' + data[week].last
+    source + ' — t/m ' + data[week].last
 
   const d = document.createElement('div')
   const tab = document.createElement('table')
@@ -133,7 +133,7 @@ async function loadPart(part, week) {
   }
 
   document.getElementById('subtitle').innerHTML =
-    part + '<br>' + data[week].start + ' t/m ' + data[week].last
+    part + ' — t/m ' + data[week].last
 
   const d = document.createElement('div')
   const tab = document.createElement('table')
@@ -181,7 +181,9 @@ async function kies() {
   }
 
   const dd = document.getElementById('data')
+  const st = document.getElementById('subtitle')
   dd.classList.add('fade')
+  st.classList.add('fade')
   await sleep(20)
 
   if (source == 'alles' || source == '') {
@@ -192,6 +194,7 @@ async function kies() {
     loadWeken(source, part)
   }
   dd.classList.remove('fade')
+  st.classList.remove('fade')
 }
 
 async function init() {

www/style2.css

@@ -141,11 +141,13 @@ label:hover {
   text-decoration: underline;
 }
 
+#subtitle,
 #data {
-  background-color: inherit;
+  opacity: 1;
-  transition: all 200ms linear;
+  transition: opacity 200ms linear;
 }
+#subtitle.fade,
 #data.fade {
-  background-color: #00fa9a;
+  opacity: 0;
-  transition: all 20ms linear;
+  transition: opacity 20ms linear;
 }