I am struggling to figure out how to use an Angular function to activate a CSS animation in my project. Specifically, I want the div "slide1" to slide horizontally to the right when either button "B1" or "B2" is clicked. Despite searching for solutions, I am still confused about how to implement this feature.
Here is the Angular function I have:
directive('click2', () => {
return{
restrict: 'A',
link: (scope) => {
scope.clicked = () => {
}
}
}
})
The CSS styling for my slide div is as follows:
.slide1 {
bottom: -500px;
width: 30%;
//min-width: 275px;
height: 50%;
min-height: 390px;
box-sizing: border-box;
position: relative;
content: '';
background: #a2e0f7;
animation:nudge 5s linear alternate;
}
@keyframes nudge {
0%{
right: 500px;
};
100% {
transform: translate(500px);
}
50% {
transform: translate(0,0);
}
}
Can anyone provide guidance on how I can utilize my Angular function to trigger the movement of the Slide1 div upon clicking?