I'm trying to do my own notification compoment in my sample Angular application.
I have the following template:
<aside *ngFor="let message of messages ">
<div class="notification" style="position:fixed">
{{message.content}}
</div>
</aside>
I push new messages through service to the component, so when new message comes it is immidiately showed in above loop.
I would like to make every message visible for 3 seconds.
I need to add a class with fade out transition which is set to 3 seconds.
Use a keyframes structure.
#keyframes fadeout {
from {opacity:1;}
to {opacity:0;}
}
.notification {
animation: fadeout 3s
}
Related
I'm trying to fade in a textbox via CSS keyframes:
.otherAnim{
animation-delay:11s;
animation-duration:2s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
#keyframes Appear{
from {opacity:0;}
to {opacity:1;}
}
<div class="col" style="width:30%;height:100%">
<h2>some text</h2>
<h2 class="otherAnim" style="animation-name:Appear;opacity:0;">some text: </h2>
<input type="text" id=myInput class="otherAnim inputSoFar" style="animation-name:Appear;float:left;height:45px;opacity:0;">
</div>
This works on JSFiddle, but not in my local view of the page (Chrome 57). The weird thing for me is that if I inspect the element, the otherAnim class has dissapeared. This doesn't happen in JSFiddle. I'm using w3.css, but it still works if I load it as a external resource in JSFiddle.
What am I possibly missing ?
Don't put the animation-name property in inline style. You have to put it in the style tag or a linked css file.
I have a share image on click of which a Div appears which contains facebook and twitter sharing options but i want this Div to appear with some fading animation.
Here is my HTML code:-
<img class="like_2" alt="image" (click) = "shareIt(i)" src="assets/img/Fwd Icons/share.png">
<div class="row" *ngIf="sharing==i">
<section class="widget">
<share-buttons (click) = "closeShareIt(i)" [url]=" myFeed.contentUrl "
[count]="false"
[totalCount]="true"
[defaultStyle]= "true"
(popUpClosed) = "true"
[google]="googleInner"
[pinterest]="false"
[linkedIn]="false"
[tumblr]="tumblrInner"
[reddit]="false"
[stumbleUpOn]="false">
</share-buttons>
</section>
</div>
You can look at the Angular2 animate docs.
https://angular.io/docs/ts/latest/guide/animations.html
However, if you are looking for something really easy to do then just use something like this ..
<div [ngClass]="{'animator': gogogo}" class="myel">i will animate</div>
then in your component class ..
gogogo=false;
ngOnInit() {
setTimeout(() => {
this.gogogo=true;
}, 1000);
}
then in your css ..
.myel {
opacity:0;
}
.myel.animator {
opacity:1;
transition:opacity 2s ease-in;
}
I have created shaking animation using wow.js. I want to pause that shake animation for sometime like 6s and restart the shake animation.How to achieve it? .I have provided snippet of shaking image
// Initialize wow
new WOW().init();
.course-img2 img{
width:30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div data-wow-delay="300ms" data-wow-iteration="infinite" data-wow-iteration="1s" data-wow-duration="0.60s" class="wow shake course-img2"> <img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="Logo"> </div>
Something like this? https://jsfiddle.net/wgdLxqrp/
Added an event listener on animation finish which, on finish, changes the value of data-wow-delay
I am trying to use the tada animation from font awesome with a custom font I generated from fontastic. I have added the font-awesome-animation.min.css to the header of my WordPress theme file. I have also added this html code to my site (see the membership icon).
<a class="faa-parent animated-hover" href="#">
<div class="service-icon-container">
<div class="fa icon icon-membership faa-tada"></div>
</div>
<h3>Membership</h3>
<p>Membership info text</p>
</a>
Any suggestions on making it work?
You forgot to change the reference of hover class in css.
for your membership icon try adding following code:
a.faa-parent:hover .service-icon-container > .fa.icon {
-webkit-animation: tada 2s linear infinite;
animation: tada 2s linear infinite;}
for all other icons, add anchor tag as you added for membership.
Having html code with several hash links (e.g.href="#login") and css using pseudo selector :target for animation, such as
#login:target ~ #wrapper #console {
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
-ms-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-name: scaleOut;
-moz-animation-name: scaleOut;
-o-animation-name: scaleOut;
-ms-animation-name: scaleOut;
animation-name: scaleOut;
}
I would like to add a feature of conditional behavior, based on "source" of the trigger event.
Let's say the html code with
<a class="hidden" id="login"></a>
<div id="wrapper">
<div id="console" class="animate">
...
has somewhere also two links
<a id="link_1" href="#login">
and
<a id="link_2" href="#login">
both pointing to #login. Is it possible to modify css to have different behavior for each of links? In my case, is it possible by pure html and css to do different kinds of animation for both links?
No. :target is the only CSS selector of its type; for any other “behaviour”, you need JavaScript or something server-side.
The closest you can get is #login1 and #login2.
This isn't possible, as you ask it, since CSS has no capacity to conditionally-assess the source of the activity, and is only able to 'react' to the end-result, without the ability to reference the source of the action that 'caused' the :target selector to match.
That said, if you're able to change your HTML, and one of the links, you could approximate it:
<a id="link_1" href="#hidden">Link One</a>
<a id="link_2" href="#login">Link Two</a>
<div id="hidden"></div>
<a class="hidden" id="login"></a>
<div id="wrapper">
<div id="console" class="animate">
</div>
You can target differently:
#hidden:target + #login {
/* style, or trigger animation */
}
#login:target {
/* style, or trigger different animation */
}
The problem, of course, is that this clearly doesn't directly cause the :target selector to match the relevant element in both cases, so the answer must remain, basically: 'no,' this is a case in which JavaScript is probably the only real solution to meet your needs.