Despite my best efforts, it seems like this should be functioning properly... but unfortunately it's not...
I'm attempting to achieve a transition effect on the parent element (ui-switch-groove) while the child element (ui-switch-dongle) moves.
The current code successfully animates the transition from "false=>true" for both parent and child, however, it only works as intended when going from "true=>false" for the child.
Is there a way to achieve this without explicitly defining keyframes for both the parent and child elements? My understanding was that I could set the state styles, timing, and let the animation handle the rest (which it almost did). Interestingly, if I comment out query(':self'), the dongle transitions correctly for both states. Similarly, if I comment out query('@dongleState'), the groove transitions correctly for both states.
In addition, I can make it animate each part one after the other, but that's not the desired outcome.
app.component.html
<app-ui-switch name="trueSet" checked="true" text="OFF" alt="ON"></app-ui-switch>
ui-switch.component.ts
@Component({
// Component properties here
})
export class UiSwitchComponent implements OnInit {
// Class methods and properties here
}
ui-switch.component.html
<div class="ui-switch-wrapper">
<div class="ui-switch-groove test" (click)="slide($event)" [@grooveState]="stateString">
<div class="ui-switch-label" (click)="slide($event)">{{ state === true ? text : alt }}</div>
<div class="ui-switch-dongle" (click)="slide($event)" [@dongleState]="stateString" ></div>
<input class="ui-switch-input" type="checkbox" [(ngModel)]="state" hidden>
</div>
</div>
ui-switch.component.css
.ui-switch-wrapper {
/* CSS styles */
}
.ui-switch-groove {
/* CSS styles */
}
.ui-switch-dongle {
/* CSS styles */
}
.ui-switch-label {
/* CSS styles */
}