how to make Angular animations div to show on mouse enter? - html

Question

I'm trying to animate a div, when the mouse enters that specific div, apparently i couln't make it done.
Any ideas how this would work in my context?
This is the animations inside the TS file
animations: [
trigger('explainerAnim', [
transition('* => *', [
query('.card', style({ opacity: 0, transform: ' translateX(-400px'})),
query('.card', stagger('100ms', [
animate('1000ms 0.9s ease-out', style({opacity:1, transform: 'translateX(0)'}))
]))
])
])
]
And this is the div that i want to show based on mouse enter
<div [#explainerAnim] class="col-sm-12 text-center about-page">
<div class="card">
<div class="developer-photo"></div>
<div class="card-body">
<h2>Who`s this guy?</h2>
<p>
I'm a Full-Stack Developer working for AppyWay in London. <br />
I have a serious passion for implementing high quality web
applications <br />
using the Microsoft stack E.g .Net Core.
</p>
</div>
</div>
<div class="card developer-details">
<div class="card-header developer-header">
<h2>I`m Norbert Csibi</h2>
<h5>Full-Stack Developer</h5>
</div>
<div class="card-body">
<p>
I am passionate about building excellent software that improves
the lives of those around me.
</p>
<table class="table table-borderless">
<thead>
<tr>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">EMAIL</th>
<td>#gmail.com</td>
</tr>
<tr>
<th scope="row">PHONE</th>
<td>55255</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 1

You can add a (mouseenter) and (mouseleave) directives on the div element that you want to trigger the animation.
<div (mouseenter)="startAnimation()" (mouseleave)="stopAnimation()">
</div>
Then you can use the angular animation states to add two states, one animated and the other without it. And set the two different states inside the startanimation() and stopAnimation() methods.
Here I let you an example of how to use the angular states:
In the TypeScript:
#Component({
selector: 'app-open-close',
animations: [
trigger('openClose', [
// ...
state('open', style({
height: '200px',
opacity: 1,
backgroundColor: 'yellow'
})),
state('closed', style({
height: '100px',
opacity: 0.5,
backgroundColor: 'green'
})),
transition('open => closed', [
animate('1s')
]),
transition('closed => open', [
animate('0.5s')
]),
]),
],
templateUrl: 'open-close.component.html',
styleUrls: ['open-close.component.css']
})
export class OpenCloseComponent {
isOpen = true;
toggle() {
this.isOpen = !this.isOpen;
}
}
In the HTML:
<div [#openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
<p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

Answer 2

Since this question was high in my search ranking, and is not that old 😉, I think others might be helped with a 'full' example
You can position the diw with the.highlight class with relative/absolute positions, but I use css-grid in this example.
TLDR;
Hostlisteners are used to change the animation states
when mouse enters and leaves
#HostListener('mouseenter', ['$event'])
onOver(event: MouseEvent): void {
this.highlightAnimationState = this.highlightStates.mouseEnter;
// console.log('mouseenter');
// console.log('Enter: this.highlightAnimationState :>> ', this.highlightAnimationState );
}
Full example >>
this is a class used to represent a row, a race track, for a team, like this:
| Team Name | (dots representing percent of max until finished at 100%) | Team Info
it is used like this in the parent component (having an array of teams to display).
race-board.component.html
<main class="main-content">
<div *ngFor="let team of raceTeams">
<app-race-track [team]="team">
<!-- if you are not familiar with ng-content (see 'app-race-track' component)
it is simply used to output whatever is inside the tags here -->
<app-race-track-divider [colorClass]="dividerPositions.getColor(i)"></app-race-track-divider>
</app-race-track>
</div>
</main>
race-track.component.html
<div
class="race-track-row"
*ngIf="team; else loadingTemplate">
<div [#highlightTrigger]="highlightAnimationState" class="highlight">
<!-- note, this is used to create higlight effect on mouseover -->
</div>
<div class="divider">
<ng-content>
<!-- here a divider line is printed; if it should be. -->
</ng-content>
</div>
<div class="team-details">
<div class="team-name">
{{team?.Name | shorten | uppercase }}
</div>
</div>
<div class="race-track" #raceTrackContainer>
<ng-container *ngFor="let item of filledDots; let i = index">
<div class="percentage-dot" id="filled-dot-{{i}}">
<mat-icon class="mat-icon-scale-up mat-icon-color-dark-grey" [inline]="true">
lens
</mat-icon>
</div>
</ng-container>
</div>
<div class="team-info">
<img src="../assets/images/race-board/raceboard-team-image.png" />
</div>
</div>
<ng-template #loadingTemplate>
... Loading race team ...
</ng-template>
</div>
You can position the div with the .highlight class using relative/absolute positions, but I use css-grid and it looks like this
race-track.component.scss
#use 'src/app/race-board-app-module' as appStyles;
/* the container of the component */
.race-track-row {
position: relative;
margin-top: 0.4rem;
width: fit-content;
display: grid;
grid-template-columns: 200px auto 80px;
grid-template-rows: auto 3rem ;
row-gap: 0.3rem;
// column-gap: 15px;
/* note: use dots to leave an area blank */
grid-template-areas:
" . track-divider . "
" team-details race-track team-info ";
}
/*note, this is used to create highlight effect on mouseover */
.highlight{
width: 100%;
grid-row: 2/3;
grid-column: 1/4;
}
.divider {
grid-area: track-divider;
}
.race-track{
grid-area: race-track;
position: relative;
padding-left: 2rem;
padding-right: appStyles.$race-track-padding-right;
display: flex;
flex-wrap: nowrap;
}
/** name (perhaps also icon and percent later?) */
.team-details {
grid-area: team-details;
justify-self: right;
align-self: center;
margin-right: 0.5rem;
padding-left: 1rem;
}
.team-name{
font-weight: 500;
}
.percentage-dot {
// align-items: center;
padding-left: appStyles.$padding-dots-container;
align-self: center;
}
.team-info{
grid-area: team-info;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
}
/* variable must be imported like this for scale and calc to function */
$icon-scale: appStyles.$icon-scale;
.mat-icon-scale-up {
transform: scale($icon-scale);
padding: appStyles.$padding-dot-icons;
}
race-track.component.ts
/* you probably don't need all of the imports here, but cpy paste from implentation so .. */
import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewChecked, Renderer2, HostListener } from '#angular/core';
import { trigger, state, style, transition, animate, keyframes } from '#angular/animations';
#Component({
selector: 'app-race-track',
templateUrl: './race-track.component.html',
styleUrls: ['./race-track.component.scss'],
animations: [
trigger('highlightTrigger', [
state('in', style({
opacity: 0.1,
backgroundColor: 'lightblue'
})),
state('out', style({
opacity: 0.0,
backgroundColor: 'lightblue'
})),
/*
this transitions has keyframes to controll the in-out speed with offset (time in point from in to out, ) you can also use
*/
transition('* <=> *', animate(50, keyframes([
style({
opacity: 0.03,
offset: 0.3
}),
style({
opacity: 0.05,
offset: 0.5
}),
style({
opacity: 0.1, /* this should, but don't have to, match the 'final' state (i.e. 'in') */
offset: 1
}),
])))
])
]
})
export class RaceTrackComponent implements OnInit, OnDestroy, AfterViewChecked {
//animation:
highlightAnimationState = "";
highlightStates = {
mouseEnter: 'in',
mouseLeave: 'out'
}
#Input() public team?: RaceBoardTeam;
/** dark icons; reprecenting team score as percent of max */
public filledDots?: number[];
constructor() { }
/** Animations: hostlisteners are used to change the animation states
* when mouse enters and leaves the race-track
*/
#HostListener('mouseenter', ['$event'])
onOver(event: MouseEvent): void {
this.highlightAnimationState = this.highlightStates.mouseEnter;
// console.log('mouseenter');
// console.log('Enter: this.highlightAnimationState :>> ', this.highlightAnimationState );
}
#HostListener('mouseleave', ['$event'])
onOut(event: MouseEvent): void {
this.highlightAnimationState = this.highlightStates.mouseLeave;
// console.log('mouseleave');
// console.log('Leave: this.highlightAnimationState :>> ', this.highlightAnimationState );
}
// other stuff omitted ....
}