I know there are many examples how to spin a icon with CSS and stuff but somehow I can't achieve what I want.
<button id="button" mat-button type="button" class="fa-spin-hover" (click)="doSomething()">
<fa-icon [icon]="['fas', 'sync']" [spin]="false" size="lg" class="rotate">
</fa-icon>
</button>
I don't know what's the best practice here. Of course I could create a boolean value and do something like [spin]="bool" but I don't think thats the right way. If I use class="fa-spin-hover" on the button the whole button spins but it works. If I use it on <fa-icon> it does not work.
.fa-spin-hover:hover {
-webkit-animation: fa-spin 2s 1 linear;
-moz-animation: fa-spin 2s 1 linear;
-o-animation: fa-spin 2s 1 linear;
animation: fa-spin 2s 1 linear;
}
I tried several things. Thats also why the attribute class="rotate" is on <fa-icon>. I tried to only have a 180 degree spin on hovering:
.rotate:hover {
animation: rotate 1s ease-in-out 0s;
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
But these classes are useless on <fa-icon>. Also tried things like ::ng-deep
Created a StackBlitz: https://stackblitz.com/edit/angular-font-awesome-starter-msp1vu
Related
I'm working with ngAnimate to show animations on screen transitions in my angular app. We are using ui-router.
What I want is to have the login screen slide upwards off the screen to reveal the next screen, after the user logs in successfully. How can I apply the .ng-leave class to only the login screen?
Here's the useful code I've got so far:
login-directive.html:
<div class="login-slide" id="login-slide">
<div class="viewport-1">
<header></header>
<background></background>
<login-form callLogin="login(username, password)"></login-form>
<version-footer></version-footer>
</div>
styles.css:
#keyframes slideOutUp {
0% {
transform: translate(0px, 400px);
}
100% {
transform: translate(0, -600px);
}
}
.login-slide.ng-leave {
-webkit-animation: slideOutUp 3s ease;
-moz-animation: slideOutUp 3s ease;
-o-animation: slideOutUp 3s ease;
animation: slideOutUp 3s ease;
}
#login-slide.ng-leave {
-webkit-animation: slideOutUp 3s ease;
-moz-animation: slideOutUp 3s ease;
-o-animation: slideOutUp 3s ease;
animation: slideOutUp 3s ease;
}
From everything I've seen, this should be enough to get the login-slide class to "slide" away when the login is complete because the login screen would be leaving the DOM at that time.
I'm also very open to using a combo of ng-class, ng-if, or any other directives if that would help.
Thanks!
A couple things:
1) You need to use some type of angular directive on the element you're trying to animate. In this case it looks like ng-view would be your best option since you're using ui-router. Here's a good example.
2) .ng-leave is the state of the element at the start of the animation. You need to have its finished state as well: .ng-leave-active. (Also in the example above)
Hope that helps.
For the past few months, I've every once in a while gotten really excited about implemented ngAnimate in an application, and each time I am crushed with the fact that I cannot do it.
The funny thing is that the documentation is really straight forward, so I'm aware that there may be something abundantly obvious that is blindsiding me.
For example, when trying to paginate through an ngRepeated array of elements, I can't seem to get a fade animation to work. Check it out:
HTML
repeated elements
<div ng-repeat="image in images" ng-hide="image.hidden">
<canvas ng-mouseover="getCoordinates($event)" id="{{image.name}}" ng-hide="image.hidden" class="fade"></canvas>
</div>
paginator
<tr>
<td><input ng-model="coordinates.x"></td>
<td><input ng-model="coordinates.y"></td>
<td><i type="button" ng-click="page(left)" class="fa fa-arrow-left"></i></td>
<td><i type="button" ng-click="page(right)" class="fa fa-arrow-right"></i></td>
</tr>
CSS
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
I've also tried it with this:
.ng-enter {
transistion: 0.5s linear all;
opacity: 0;
};
.ng-enter-active {
transition: 0.5s linear all;
opacity: 1;
};
.ng-leave {
transition: 1s linear all;
opacity: 1;
};
.ng-leave-active {
transition: 0.5s linear all;
opacity: 0;
};
To keep this post more brief, I'll forgo the javascript stuff, but let it suffice that the pagination works.
Now, from my perspective, it seems like the issue is that Angular.js (1.4.7) is not adding the ng-enter, ect., classes upon hiding/showing. What could be the reason for this?
This post suggest I downgrade my Angular.js version, but I'm not going to do that. I believe animation should work on the latest version, I just have to figure out how.
I tend to use animate.css library since most basic animations are defined in there. Also, be sure to load the ngAnimate module as a dependent module in your angular app.
You can use the animate library classes in your apps style sheet to define what happens on ng-enter, ng-move, ng-leave, etc..
.animation.ng-enter, .ng-move {
-webkit-animation: fadeInRight 1s;
-moz-animation: fadeInRight 1s;
-ms-animation: fadeInRight 1s;
-o-animation: fadeInRight 1s;
animation: fadeInRight 1s;
}
.animation.ng-leave {
-webkit-animation: fadeOutRight 1s;
-moz-animation: fadeOutRight 1s;
-ms-animation: fadeOutRight 1s;
-o-animation: fadeOutRight 1s;
animation: fadeOutRight 1s;
}
Then on the element using ng-repeat you apply the css along with the .animate class.
<input type="text" ng-model="filter"/>
<div class="animation animated" ng-repeat="item in [1,2,3,4,5,6,7] | filter: filter">
<div class="box">
<h1>{{item}}</h1>
</div>
</div>
Here is a simple working example
I believe the class you're looking for is .foo.ng-enter and .foo.ng-enter-stagger for ngAnimate. These are the classes that ngAnimate requires you use.
You use .foo.ng-enter for your animation and .foo.ng-enter-stagger for its delay. E.g.
.foo.ng-enter {
-webkit-animation: fadeInLeft 1s;
animation: fadeInLeft 1s;
}
.foo.ng-enter-stagger {
-webkit-animation-delay:200ms;
animation-delay:200ms;
/* override to make sure it's not inherited from other styles */
-webkit-animation-duration:0;
animation-duration:0;
}
I always had trouble with this until I stumbled upon this site which explains both Animate CSS and ngAnimate in use with an Ionic Project.
I've got an HTML element here with this starting style:
transition: transform 2s;
First, it is animated (it rotatesX) via a class that is added on click. On the next click, another class is added that adds a transform3d that should move the element vertically and this should take 2 seconds as per the rule above.
The transform3d doesn't take effect unless I add this rule to the element: animation: none as well. I am confused on what animation: none actually does. Are there complications with transforming an element that has had an animation applied to it?
animation: none sets all animate-* properties to their initial value:
animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
The problem is that your element has an animation which affects its transform property. Therefore, when you modify its static transform, you don't see the change because it's overridden by the animation.
Then, if you remove the animation, you see the change in transform.
This is unrelated to transforms, it would happen with any property, like color:
div {
animation: color-anim 1s infinite;
}
#keyframes color-anim {
from { color: red }
to { color: blue }
}
<div>Lorem ipsum</div>
<button onclick="document.querySelector('div').style.color = '#fff'">Make white</button>
<button onclick="document.querySelector('div').style.animation = 'none'">Remove animation</button>
i want t create an interactive menu for my site:
1) when user "hovers" menuitem it becomes highlighted -> animation stops.
2) after he takes coursor off animation resumes -> item becomes dark.
How can i do this with CSS . Because now i got full animation cycle.
Sorry, guys, I'm almost sleeping =)
Here is CSS :
a.navitem:hover {
animation: nicehover 2s infinite;
-webkit-animation: nicehover 2s infinite;
-moz-animation: nicehover 2s infinite;
animation-iteration-count:1;
-webkit-animation-iteration-count:1;
-moz-animation-iteration-count:1;
}
#keyframes nicehover{
50%{
color:#6a6a6a;
}
}
#-webkit-keyframes nicehover{
50%{
color:#141313;
}
}
#-moz-keyframes nicehover{
50%{
color:#6a6a6a;
}
}
HTML :
<ul class="navigation">
<li><a class="navitem" href="index.html">ABOUT-ME</a></li>
<li><a class="navitem" href="projects.html">PROJECTS</a></li>
<li><a class="navitem" href="contacts.html">CONTACTS</a></li>
</ul>
What i want : grey href becomes black when you put mouse over it , and become grey again when you take ,ouse off.
What i have : when I put mouse over i got full animation period . (And it is clear from the code, because i don't know the way of stoping it at some position.)
If I'm understanding you correctly, you don't want a css animation, you want a transition:
http://jsfiddle.net/S7Nmf/
a.navitem{
color:#6a6a6a;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
a.navitem:hover {
color: #141313;
}
I'm making a simple landing page driven by CSS3. To make it look awesome there's an <a> plopping up:
#keyframes splash {
from {
opacity: 0;
transform: scale(0, 0);
}
50% {
opacity: 1;
transform: scale(1.1, 1.1);
}
to {
transform: scale(1, 1);
}
}
And to make it even more awesome I added a hover animation:
#keyframes hover {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.1, 1.1);
}
}
But there comes the problem! I assigned the animations like this:
a {
/* Some basic styling here */
animation: splash 1s normal forwards ease-in-out;
}
a:hover {
animation: hover 1s infinite alternate ease-in-out;
}
Everything works just fine: The <a> splashes into the users face and has a nice vibration when he hovers it. Bit as soon as the user blurs the <a> the smooth stuff ends abruptly and the <a> repeats the splash-animation. (Which is logical to me, but I don't want it to)
Is there some way to solve this problem without some JavaScript Class Jiggery Pokery?
After hours of googling: No, it's not possible without JavaScript. The animation-iteration-count: 1; is internally saved in the animation shothand attribute, which gets resetted and overwritten on :hover. When we blur the <a> and release the :hover the old class reapplies and therefore again resets the animation attribute.
There sadly is no way to save a certain attribute states across element states.
You'll have to use JavaScript.
If I understand correctly that you want to play the animation on A only once you have to add
animation-iteration-count: 1
to the style for the a.
It can be done with a little bit of extra overhead.
Simply wrap your link in a div, and separate the animation.
the html ..
<div class="animateOnce">
<a class="animateOnHover">me!</a>
</div>
.. and the css ..
.animateOnce {
animation: splash 1s normal forwards ease-in-out;
}
.animateOnHover:hover {
animation: hover 1s infinite alternate ease-in-out;
}
I just got this working on Firefox and Chrome. You just add/remove the below class accordingly to your needs.
.animateOnce {
-webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-moz-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
-o-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards;
}
Just use
animation: hover 1s ease-in-out forwards;
An easy solution to solve this problem is by just adding more seconds to the animation in a:hover and taking advantage of the transitions in #keyframes
a:hover {
animation: hover 200s infinite alternate ease-in-out;
}
Just make the progression of #keyframes go faster by using percentages.
#keyframes hover {
0% {
transform: scale(1, 1);
}
1% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1.1, 1.1);
}
}
200 seconds or 300 seconds in the animation is more than enough to make sure the animation doesn't restart. A normal person won't last more than a few seconds hovering an image.
Impossible in CSS only, you need a javascript workaround. As already explained by some here, the animation-iteration-count property is reset on a :hover. The best is to do everything in javascript, but for reasons of ease of customization of the code you may want to keep the possibility of doing something in CSS.
So, in JS :
// adding a class to the html tag, during the animation time
const startPage = (() => {
const html = document.documentElement,
s = 'start'
html.classList.add(s)
window.addEventListener('load', function() {
setTimeout(() => {
html.classList.remove(s)
}, 1500) // the time must be at least equal to the duration of the CSS animation (personally I put a little more).
})
})()
And for the CSS:
/* the presence of the `.start` class conditions the animation */
.start .leaflet-marker-pane {
animation: animDrop 1s ease;
}
The following code without "iteration-count: 1" was resulting in all line items pulsing after entering, until the last item loaded, even though 'pulse was not being used.
<li class="animated slideInLeft delay-1s animation-iteration-count: 1"><i class="fa fa-credit-card" aria-hidden="true"></i> 1111</li>
<li class="animated slideInRight delay-1-5s animation-iteration-count: 1"><i class="fa fa-university" aria-hidden="true"></i> 222222</li>
<li class="animated lightSpeedIn delay-2s animation-iteration-count: 1"><i class="fa fa-industry" aria-hidden="true"></i> aaaaaa</li>
<li class="animated slideInLeft delay-2-5s animation-iteration-count: 1"><i class="fa fa-key" aria-hidden="true"></i> bbbbb</li>
<li class="animated slideInRight delay-3s animation-iteration-count: 1"><i class="fa fa-thumbs-up" aria-hidden="true"></i> ccccc</li>
So i just found a solution for that:
In the hover animation do this:
animation: hover 1s infinite alternate ease-in-out,splash 1;