I have a bunch of thumbnails and I would like an overlay slide to appear from the bottom of the thumbnail when the user hovers over the thumbnail and have the overlay retract when the user isn't hovering over the thumbnail.
animations: [
trigger('overlaySlide', [
state('in', style({})),
transition(':enter', [
style({
transform: 'translateX(-100%)'
}),
animate('0.5s ease')
]),
transition(':leave', [
style({
transform: 'translateX(-100%)'
}),
animate('0.5s ease')
])
])
]
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div id="gallery" class="text-center">
<ng-container *ngFor="let picture of gameImages">
<img src="/assets/images/maple.jpg" class="img-thumbnail">
<div class="overlay">
<div class="overlay-text" [#overlaySlide]> Hello World</div>
</div>
</ng-container>
</div>
Since you are using :enter and :enter keywords, you need to remove the element from the DOM. Try something like this:
<div #overlaySlide *ngIf="show" (mouseenter)="show = true" (mouseleave)="show = false"> Hello World</div>
Related
Using Angular, I wanted to make an animated display list. The problem is that I am getting this error:
Objects are in the array and show up on the screen, but are not animated.
This is what the HTML code looks like, where I iterate through the table and display the elements that I want to be slowly displayed (animation):
<section [#listAnimation]="articles.length">
<div *ngFor="let article of articles">
<div class="card border-0">
<div class="row no-gutters">
<div class="col-md-4 mt-3">
<div class="container-text-image">
<img [src]="article.mainImageSrc" onerror="this.onerror=null; this.src='..\..\..\assets\notFound.png';" class="card-img" [alt]="article.mainImageFullName">
<div class="label bottom-left">
<h3 class="label-text">
{{article.category}}
</h3>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title mt-0">{{article.title}}</h5>
<p *ngIf="article.description != null" class="card-text description-text">{{article.description}}</p>
</div>
</div>
</div>
</div>
</div>
</section>
This is what the animation code looks like in a component:
const listAnimation = trigger('listAnimation', [
transition('* <=> *', [
query(':enter',
[style({ opacity: 0 }), stagger('60ms', animate('600ms ease-out', style({ opacity: 1 })))],
),
query(':leave',
animate('200ms', style({ opacity: 0 })),
)
])
]);
#Component({
selector: 'app-articles',
templateUrl: './articles.component.html',
styleUrls: ['./articles.component.css'],
animations: [listAnimation]
})
Here's a snippet of code where I get my backend data into an array:
private fetchArticles = (): void => {
this.loaderService.show();
this.articlesService
.getPortalArticles(this.getArticlesParams())
.pipe(
finalize(() => {
this.setArticleMainImg();
this.loaderService.hide();
})
)
.subscribe(
(result) => {
this.articlesCount = result.totalItemsCount;
this.articles = result.items;
},
(error) => { }
);
}
Any ideas what might be causing the error? I realize that I can add {optional: true} to the animation code, but this will only get rid of the error and the animation will still not work.
I have a div with some contents of which I need to animate its position, and so far so good. But another element inside that div also needs its own animation, separate from the main one. the problem is that when I try to create two different animations for it, using the same trigger, the first animation works, but the second animation doesn't animate and only skips to it's final position after the first animation has completed.
this is my HTML file:
<div [#moveAvatar]='state' class="contents">
<ngx-avatar class="avatar" src="./assets/image.jpg" size="80"></ngx-avatar>
<div class="text" [#moveText]='state'>
<h1 class="titel"> title</h1>
<p class="subtitel">subtitle</p>
</div>
</div>
and my typescript:
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
animations: [
trigger('moveAvatar', [
state('maximum', style({
top: '15%',
left: '80%',
textAlign: 'right',
})),
transition('* => maximum', animate('1s ease-in-out')),
]),
trigger('moveText', [
state('maximum', style({
top: '10%',
left: '90%',
transform: 'translate(-100px, -75px)',
})),
transition('* => maximum', animate('1s ease-in-out')),
])
]
})
currently this is what the two animations look like:
what am I doing wrong?
P.S.
I assume textAlign cannot be animated? as you can see it's included but it jumps too.
solution: use one trigger with a group() inside of it:
trigger('moveAvatar', [
transition('* => maximum', [
group([
animate('800ms ease-in-out',
style({
top: '15%',
left: '90%',
})
),
query('.text', [
animate('800ms ease-in-out',
style({
top: '10%',
left: '90%',
transform: 'translate(-170px, -75px)',
})
),
]),
query('.titel', [
animate('1s ease-in-out',
style({
transform: 'translate(50px, 0)',
})
),
])
])
])
])
I am new to the Angular 8 framework. I am trying to implement animation using angular animations
Here is what the code looks like:
This component is in <div class="col-md-5"></div> as a parent div.
component.ts:
#Component({
selector: 'app-agent-bot',
templateUrl: './agent-bot.component.html',
styleUrls: ['./agent-bot.component.css'],
animations: [
trigger('bot_res_slide', [
transition('* => *', [
animate('2s', keyframes([
style({ transform: 'translate3d(-100%, 0, 0)', visibility: 'visible' }),
style({ transform: 'translate3d(0, 0, 0)' })
]))
])
])
]
})
component.html
<main>
<div class="bot shadow-sm" [ngStyle]="{height: botHeight}">
<div class="bot_header p-2 rounded-top">
<div class="row">
<div class="col-md-12">
<div class="color_blue">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
<span class="ml-3">AGENT BOT</span>
</div>
</div>
</div>
</div>
<div class="bot_body rounded-bottom d-flex flex-column">
<div class="p-2">
<div class="bot_response" #bot_res_slide>
<div class="bot_response_msg">
Hello Agent! How may I help?
</div>
<div class="bot_response_msg_time">03:00pm</div>
</div>
<div class="user_response">
<div class="user_response_msg">
Hi..!
</div>
<div class="user_response_msg_time">03:01pm</div>
</div>
</div>
<div class="mt-auto d-flex border-top input_section">
<div class="canned_msg">
<img src="./../../../assets/icons/canned_icon.png" class="w-100 h-100">
</div>
<div class="h-100 w-100 border-left">
<input type="text" class="user_input" placeholder="Type here" />
</div>
<div class="send_msg_btn d-flex justify-content-center align-items-center px-3">
<i class="fa fa-paper-plane my-auto" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</main>
Here is what the output looks like:
The expected output is the animation should only work in the bot component and should not be displayed outside.
Where am I going wrong or where should I improve my code?
Add overflow: hidden to the message list container (.bot_body).
This will clip the child elements rendering outside the container
I do believe that your issue is in the way you've done a simple translateX job with the translate3d property. Your element is showing up from the far left because the syntax of transform3d(x, y, z) values and you've made it travel the whole page (100%). For a slide, I'd recommend changing to a transform: translateX(value) to use the best function for the job. As well as define the transform-origin to be aligned to the edge of your message/ bot container. #vishalbiswas also has a possible solution by using overflow: hidden on the containing element.
...
style({ transform: 'translateX(-100%)', visibility: 'visible' }),
style({ transform: 'translateX(0)' })
...
In CSS:
.bot-response {
overflow: hidden;
}
I want to animate from bottom when I click on link. Below is the image what I want to achieve. On click of Link whole "Red" section should be animated and come from the bottom side. To achieve that What I did is:
What I tried is:
#Component({
selector: 'mypage',
templateUrl: './mypage.component.html',
styleUrls: ['./mypage.component.scss'],
animations: [
trigger('slideInOut', [
state('flyIn', style({
transform: 'translateX(0)'
})),
transition(':enter', [
style({
transform: 'translateX(-100%)'
}),
animate('0.5s 300ms ease-in')
]),
transition(':leave', [
animate('0.3s ease-out', style({
transform: 'translateX(100%)'
}))
])
])
],
});
animationState = "flyIn";
dataRefresh(id) {
this.animationState = 'flyIn';
}
<div [#slideInOut]="animationState">
<!-- Here is other page content, which I need to animate from bottom -->
<div class="col-lg-10 col-md-10 col-10" (click)="dataRefresh(id)">
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<div class="branch_row_padding">
<div class="">Name</div>
<div class="">Description</div>
</div>
</div>
</div>
</div>
</div>
By trying above, what happens only link div is animating from left side, I want to animate whole page.
What can be the possible solution for this?
Why not do it with just CSS?
relevant css:
.myAnimateClass{
border:1px solid red;display:block; animation: example 3s ease-in-out;
}
#keyframes example {
from {margin-left:-100%;}
to {margin-left:0;}
}
relevant TS:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular 6';
show: boolean = true;
myAnimateClass: string = '';
resetClass() {
console.log("check");
setTimeout(() => {
this.myAnimateClass = 'myAnimateClass';
},100);
}
animatePage() {
if(this.myAnimateClass == 'myAnimateClass') {
this.myAnimateClass = 'something';
this.resetClass();
} else{
this.myAnimateClass = 'myAnimateClass';
}
}
}
relevant HTML:
<div [ngClass]='myAnimateClass'>
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<button type="button" (click)='animatePage()'>Animation page</button>
<div >
<!-- Here is other page content, which I need to animate from bottom -->
<div class="col-lg-10 col-md-10 col-10" (click)="dataRefresh(id)">
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<div class="branch_row_padding">
<div class="">Name</div>
<div class="">Description</div>
</div>
</div>
</div>
</div>
</div>
</div>
check working stackblitz here
I'm trying to make an expansion effect in my navbar using angular.
I need when I click in "mostrar informações" the content must ride up.
The problem is that the superior part of my footer is not following the effect.
I try something like:
<footer class="page-footer font-small footer-fundo-cinza">
<div class="container">
<div class="row pt-3">
<div class="col-md-4">
<img src="../../../assets/estilomotocar-rodape.png" class="img-responsive img-fluid">
</div>
</div>
</div>
<div [#fadeInUpDown]="mostrar_informacoes" [#statusDisplay]="mostrar_informacoes" class="row">
<div class="container">
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
</div>
</footer>
My animations:
export const statusDisplay =
trigger('statusDisplay', [
state('aberto', style({ display: 'block' })),
state('fechado', style({ display: 'none' })),
transition('fechado => aberto', animate('0ms ease')),
transition('aberto => fechado', animate('0ms 200ms ease'))
])
export const fadeInUpDown =
trigger('fadeInUpDown', [
state('fechado', style({
transform: 'translate3d(0,100%,0)'
})),
state('aberto', style({
transform: 'translate3d(0,0,0)'
})),
transition('fechado <=> aberto', animate('400ms ease'))
])
If I put my animation direct in my footer the effect work but the translate3d make my nav go out the page, making a scroll.
My CSS:
footer{
position: absolute;
bottom: 0;
width: 100%;
}
Your code is not enough to evaluate your problem . Generally in Angular and any other web language you would need to explain your css very good . In that case I would propose a wrapper element :
<div class="wrapper">
<div class="ride-up">
<div class="ride-up-element"> Some text here </div>
</div>
</div
And then the CSS :
.wrapper {
display : flex ;
flex-direction : row/column ;
width : you choose it ;
height : as well :
other-options : also you choose;
}
.ride-up {
width : you choose it ;
height : as well :
}
.ride-up:hover {
some css goes here ....
}
.ride-up-element {
some other css goes here....
}