How to use: Animations
The following guide describes how to use the animations currently implemented into DeX.
To show the clickable items, they will grow when the mouse moves over them. There are a couple different amounts of grow, that can be implemented with a variable based on the available room.
$transform-grow-small$transform-grow$transform-grow-big
This can be added in this way:
button {
&:hover { transform: $transform-grow; }
}
The search icon has a special spinning animation, you can implement this on other suitable places.
It works the same as the variables mentioned above, using this variable: $transform-rotate
A timing variable needs to be used to create the duration of an animation. This timing will be added to the general class/id of the item you're giving an animation.
button { transition: transform $transition-short; }
Important: This timing function should be added to a specific part of the item. For example:
❌ transition: $transition-short;
✔️ transition: transform $transition-short;
There is a loading animation implemented using these styles from Font Awesome
When you want to add a loading circle somewhere you can do that by adding the following code with an *ngIf-condition to display when loading:
<h2 class="fas fa-spinner fa-pulse loading-circle"></h2>
Where fas fa-spinner fa-pulse are the classes for functionality by Font Awesome and .loading-circle has custom styling to add a DeX-color to the icon.
