Hello Oleg,
That's a pretty idea!
You can easily achieve this with some custom CSS in Visforms.
The HTML of a conditional field with field ID=294 is:
Code:
<div class="conditional field294">
..
</div>
With this CSS you give all conditional fields a simple so-called 'fadeIn':
A 'fadeIn' consists of a panning movement and transparency.
Code:
.conditional {
animation-name: fadeIn;
animation-duration: 2s;
}
With this CSS you give all conditional fields a self-defined animation:
The animation is defined with a CSS '@keyframes' rule, or the so-called 'animation code'.
Code:
@keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.conditional {
animation-name: example;
animation-duration: 2s;
}
You can also set individual animations for individual fields:
Example with 3 conditional fields with the IDs 292,293, 294 and 3 different animations.
Code:
@keyframes example1 {
from {background-color: red;}
to {background-color: yellow;}
}
@keyframes example2 {
from {opacity: 0;}
to {opacity: 1;}
}
.conditional.field292 {
animation-name: example1;
animation-duration: 2s;
}
.conditional.field293 {
animation-name: example2;
animation-duration: 2s;
}
.conditional.field294 {
animation-name: fadeIn;
animation-duration: 2s;
}
Create custom CSS files with Visforms:
You can create custom CSS files which will be loaded automatically into your form.
To do this, simply go to the “Components->Visforms” menu in the administration and then on the “Edit CSS” button on the Visforms Dashboard. You get to a view where, like in the Joomla! UI template component, where you can edit existing CSS files, create new CSS files, upload and rename files.
The integration of additional own CSS files takes place via a simple naming convention.
Note: The files must have the character string "custom" in the file name.
Otherwise, the letters a-z, A-Z and the special characters - (minus) and _ (underscore) are permitted in the file name.
Visforms uses weak CSS selectors to blend in as well as possible to adapt to the design of the UI template.
All HTML parts of Visforms are easily addressable with rather simple CSS selectors.
Individual settings with regard to working with custom CSS are possible at various places:
- field configuration: tab 'Advanced' in section 'Layout' (especially parameters 'CSS Class For Label' and 'CSS Class For Field'),
- form configuration: tab 'Advanced' in section 'Layout' (especially parameter 'CSS Class'),
-
Visforms Dashboard button 'Edit CSS': add and edit own CSS files.
Read more on this topic in our documentation:
docs.joomla-4.visforms.vi-solutions.de/e...orm-layout-with-css/
Learn more on animations at w3schools:
www.w3schools.com/css/css3_animations.asp
Kind regards, Ingmar
I recommend you the new and up-to-date documentation for Joomla 4:
.