CovidTrackerFr#99 Fade in then fade out with css

Author: nhumblot

src/views/vmd-rdv.view.scss

@@ -91,6 +91,17 @@
     }
 }
 
+.fade-in-then-fade-out {
+    animation-name: fade-in-then-fade-out;
+    animation-duration: 10s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fade-in-then-fade-out {
+    0%, 100% {opacity: 0}
+    10%, 90% {opacity: 1}
+}
+
 vmd-appointment-card {
     display: block;
     opacity: 1;

src/views/vmd-rdv.view.ts

@@ -55,9 +55,6 @@ export abstract class AbstractVmdRdvView extends LitElement {
 
     protected derniereCommuneSelectionnee: Commune|undefined = undefined;
 
-    private eligibilityCriteriaTimeout: number|undefined = undefined;
-    private eligibilityCriteriaDisplayed: boolean = true;
-
     get communeSelectionnee(): Commune|undefined {
         if(this.derniereCommuneSelectionnee) {
             return this.derniereCommuneSelectionnee;
@@ -80,10 +77,6 @@ export abstract class AbstractVmdRdvView extends LitElement {
 
     protected firstUpdated(_changedProperties: PropertyValues) {
         super.firstUpdated(_changedProperties);
-        this.eligibilityCriteriaTimeout = setTimeout(async () => {
-            this.eligibilityCriteriaDisplayed = false;
-            await this.requestUpdate();
-        }, 10000);
     }
 
     protected getDepartementSelectionne(): Departement|undefined {
@@ -251,21 +244,13 @@ export abstract class AbstractVmdRdvView extends LitElement {
                     })}
                   ` : html``}
                 </div>
-                ${this.renderEligibilityCriteria()}
+                <div class="eligibility-criteria fade-in-then-fade-out">
+                    <p>Les critères d'éligibilité sont vérifiés lors de la prise de rendez-vous</p>
+                </div>
             `}
         `;
     }
 
-    private renderEligibilityCriteria() {
-        if (this.eligibilityCriteriaDisplayed) {
-            return html`
-                <div class="eligibility-criteria">
-                    <p>Les critères d'éligibilité sont vérifiés lors de la prise de rendez-vous</p>
-                </div>`;
-        }
-
-        return ``;
-    }
     onCommuneAutocompleteLoaded(autocompletes: string[]): Promise<void> {
         return Promise.resolve();
     }
@@ -338,11 +323,6 @@ export abstract class AbstractVmdRdvView extends LitElement {
 
     disconnectedCallback() {
         super.disconnectedCallback();
-
-        if (this.eligibilityCriteriaTimeout) {
-            clearTimeout(this.eligibilityCriteriaTimeout);
-            this.eligibilityCriteriaTimeout = undefined;
-        }
     }
 
     _onRefreshPageWhenValidParams(): "return"|"continue" {