Das Problem

Möchte man Input-Elemente mit fade-Transition versehen, kommt man an einen schwierigen Punkt. Aus barrierefreiheits- und antiphishing-Gründen sollte man keine aktiven Formularelemente unsichtbar machen (beispielsweise mit opacity: 0;). Es besteht die Gefahr, das der Betrachter ohne Wissen im Formular „herumstochert“ und ungewollte Aktionen auslöst.

Eine Lösung scheint zunächst display: none; oder visibility: hidden;, doch die display-Proberty lässt sich nicht animieren. Benutzt man visibility ist das Element in der Regel ausgeblendet, bevor die opacity-Transition greifen kann. Weiterlesen →