Hej, probuje animować element typu output.
Fakt, że jest to troszeczke inna struktura bo w Lightning componencie (pewnie nie wiecie nawet co to takiego) - zasada jest ta sama.
mam inputa:
<ui:inputText aura:id="name" label="Last Name" placeholder="Kowalski" labelClass='custom-label'/>
i teraz dla niego mam takie CSS:
.data-entry {
border-style: outset;
}
input {
visibility:hidden;
}
input:hover,
input:focus,
input:active
{
visibility: visible;
border: transparent;
border-bottom: #18FFFF;
}
label:hover {
color: #18FFFF;
transform: translateX(-20px);
transform: translateY(-20px);
-webkit-transform: translateX(-20px);
-webkit-transform: translateY(-20px);
}
label {
color: grey;
position: absolute;
transition: all 0.2s ease-in-out;
}
input:not:empty{
visibility: visible;
background-color: pink;
}
Domyślnie chciał bym zrobić coś takiego:
W tym momencie mam tylko Labelkę, która przemieszcza sie w górę i zmienia kolor pokazując pole do wprowadzenia.
Nie wiem jak ugryźć tą animację rozchodzenia koloru od spodu.