I want to trigger these 3 events simultaneously when a form is filled out, all initiated by the same button.
I have been able to make it work using 3 classes named:
- "draw dj", which represents the first event
- "draw1 dj", which signifies the 2nd event
- "draw2 dj", indicating the final event
Here is the form I need to alter.
My Strategy
After the user completes editing the 1st field, Event 1 is triggered by adding the "draw dj" classes
Next, upon completion of editing the 2nd field, the classes change from "draw dj" to "draw1 dj" (this part is functioning correctly)
However, when the third event is activated, there is no transition and it directly switches to the final appearance.
Expected CSS Output
.draw2 {
// transition: color 0.25s;
color: lightgrey;
background-image: linear-gradient(rgb(255,123,0),rgb(255,123,0));
background-position: 50%;
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 0.5s 0.8s, color 1s 0.5s;
&:hover{
color:white;
background-size:100% 100%;
}
&::before,
&::after {
// Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
border: 2px solid transparent;
width: 0;
height: 0;
}
// This covers the top & right borders (expands right, then down)
&::before {
top: 0;
left: 0;
}
// And this the bottom & left borders (expands left, then up)
&::after {
bottom: 0;
right: 0;
}
// Hover styles
&:hover::before,
&:hover::after {
width: 100%;
height: 100%;
}
&:hover::before {
border-left-color: rgb(255,123,0); // Make borders visible
border-bottom-color: rgb(255,123,0);
transition:
width 0s ease-out, // Width expands first
height 0s ease-out; // And then height
}
&:hover::after {
border-right-color: rgb(255,123,0); // Make borders visible
border-top-color: rgb(255,123,0);
color:white;
transition:
border-color 0s ease-out, // Wait for ::before to finish before showing border
height 0.25s ease-out, // And then exanding width
width 0.25s ease-out 0.25s; // And finally height
}
}
Current CSS Output
.draw2 {
// transition: color 0.25s;
color: lightgrey;
background-image: linear-gradient(rgb(255,123,0),rgb(255,123,0));
background-position: 50%;
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 0.5s 0.8s, color 1s 0.5s;
&.dj{
color:white;
background-size:100% 100%;
}
&::before,
&::after {
// Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
border: 2px solid transparent;
width: 0;
height: 0;
}
// This covers the top & right borders (expands right, then down)
&::before {
top: 0;
left: 0;
}
// And this the bottom & left borders (expands left, then up)
&::after {
bottom: 0;
right: 0;
}
// Hover styles
&.dj::before,
&.dj::after {
width: 100%;
height: 100%;
}
&.dj::before {
border-left-color: rgb(255,123,0); // Make borders visible
border-bottom-color: rgb(255,123,0);
transition:
width 0s ease-out, // Width expands first
height 0s ease-out; // And then height
}
&.dj::after {
border-right-color: rgb(255,123,0); // Make borders visible
border-top-color: rgb(255,123,0);
color:white;
transition:
border-color 0s ease-out, // Wait for ::before to finish before showing border
height 0.25s ease-out, // And then exanding width
width 0.25s ease-out 0.25s; // And finally height
}
}