The site where I want my animation to work adds #user-space before any of my tags. So, my animation looks like this:
#user-space #-webkit-keyframes animation-name {
from {
style definition ["Before"-state]
}
to {
style definition ["After"-state]
}
And that #user-space declaration is breaking the css statement and animation is not working. Is there any way, to do that otherwise? For exaple put my keyframes insine -webkit-animation: animation-name 1.1s ease infinite; like
webkit-animation: from {
style definition ["Before"-state]
}
to {
style definition ["After"-state]
} 1.1s ease infinite; like
The solution I see is to get around your problem and do it with javascript.
Simply add a new style in your html file (in the header) and add the #-webkit-keyframes animation inside.
There is a thread which explains it well (see accepted solution): Set the webkit-keyframes from/to parameter with JavaScript
Related
I use "vuex-module-decorators" and dynamically determine the style in this getter:
<div class="viewport":style="viewportStyleVars">...</div>
get viewportStyleVars() {
const tx = -this.viewportRect.x;
const ty = -this.viewportRect.y;
return {
'--translate-x': `${tx}px`,
'--translate-y': `${ty}px`,
}
}
How to make change happen smoothly, not instantly?
I would be grateful for the hints, I am not familiar with the animation.
You just need to add transition in CSS to the div with class .viewport something like:
.viewport{
transition: all 1s linear;
}
The 1s in the transition, is the time, that the action will take, you can tweak this value to something smaller, like 0.1s, if that suits you better.
I'm creating a dashboard page which is full of CSS animations. From Bootstrap stuff (animated progress bars) to custom animations.
When you click some of the elements, a near full-screen modal is triggered, which overlaps all the animations, so I want to temporarily pause them all (because of possible performance issues) by adding/removing a class to one of the top elements, and using CSS to pause all animations when that class is set.
This solution would use only a single line of js, just to toggle the class on opening the modal.
My template looks somewhat like this:
<body>
<div class="modal">
<!-- Modal code -->
</div>
<div class="app">
<!-- Template -->
</div>
</div>
Is it possible to add a class to .app which pauses every CSS animation in every child element?
Note 1:
I know you can use the exact opposite of what I request: namely, have a default .animation-play class to one of the top elements, and prefix every child element with an animation with this class, and then remove this class to pause every animation. Just like:
app.animation-play .somediv .somediv .element {
// animation code
}
app.animation-play .somediv .element {
// animation code
}
app.animation-play .somediv .somediv .somediv .somediv .element {
// animation code
}
But then I have to edit a lot of CSS code, and it doesn't look very nice either.
Note 2:
I'm also open for a JS solution, but I would heavily prefer a pure CSS way of achieving this.
You can use a universal selector to target everything when a class of 'paused' is added to your app wrapper, however many CSS linters still warn against using these due to performance impacts.
To be honest the impact is probably minimal these days and many CSS resets for example use them.
You could use something like:
.app.paused * {
animation: none;
}
EDIT:
Looking through the comments above it seems as though the above selector doesn't have enough precedence to overwrite the animations so '!important' has been added.
.app.paused * {
animation: none !important;
transition: none !important;
}
However this is generally not a great idea, I always try to avoid using '!important' at all costs due to the difficulty in maintaining the stylesheet with these selectors in place. If you can overwrite the animations with a greater precedence then it would be better to do so rather than using '!important'.
EDIT 2:
As you mentioned you were open to JS solutions, here is some JS that should clear all the animations within a given selector. I'm not sure what the performance impact of doing it this way is but I added it here just in case someone else prefers to do it only using JS:
let stopAnimationsWrap = document.querySelector('.app');
let stoppedAnims = [];
// Stop animations
document.querySelector('.stop').addEventListener('click', () => {
let appAllEls = stopAnimationsWrap.querySelectorAll('*');
let allElsAr = Array.prototype.slice.call(appAllEls);
allElsAr.forEach((thisEl) => {
let elClass = thisEl.classList[0];
let cs = getComputedStyle(thisEl, null);
let thisAnimation = cs.getPropertyValue('animation-name');
if (thisAnimation !== 'none') {
stoppedAnims.push([elClass, {
'animationName': thisAnimation
}]);
thisEl.style.animationName = 'none';
}
});
});
// Start animations
document.querySelector('.start').addEventListener('click', () => {
stoppedAnims.forEach((thisEl) => {
let domEl = '.' + thisEl[0];
stopAnimationsWrap.querySelector(domEl).style.animationName = thisEl[1].animationName;
});
});
Fiddle:
https://jsfiddle.net/vu6javb2/14/
.app {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
on hover:
.app:hover {
-webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
animation-play-state: paused;
}
I have a text that is centered. it's replaced every 4 seconds.
I want that when a text is displayed: it will come from the right (opacity=0) to the center (opacity=1),
and when the text is hidden, it will go from the center (opacity=1) to the left (opacity=0).
This is what I tried:
.fade.ng-enter {
transition:0.5s ease-out all;
opacity:0;
}
.fade.ng-enter.ng-enter-active {
opacity:1;
}
.fade.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.fade.ng-leave.ng-leave-active {
opacity:0;
}
This is my codepen:
https://codepen.io/anon/pen/jwNomv
Any help appreciated!
You don't have dependency on ng-animate. And even if you did, it won't work, because ng-animate supports directives like ng-view, ng-show, ng-hide, ng-repeat.
What you are doing is simply changing the visible text. You need to make use of either of these directives to make ng-animate work.
Instead, if you want it to work, you will have to add these classes yourself, and it can be done using JQlite API, you can make use of addClass(), removeClass() and toggleClass().
var element = angular.element( 'id' );
/** Use timeouts to clearly decide when an element at which state. */
element.addClass( 'ng-enter' );
An another solution using KeyFrames has been implemented here.
You should use webkit animation. you can find more info at https://www.w3schools.com/css/css3_animations.asp
I have a div like this:
<div class="row">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
I create the alerts in angularjs (and I'm using bootstrap), and while this works great, the visual effect is kind of uncool. As alerts are added to the div, all page content is shoved ungracefully down to make room for the new alert.
I would like to animate the movement so that it is at least smooth. But I don't want to use jQuery. I've played with the CSS3 transitions, but can't seem to get them to work smoothly.
Can I do this where the trigger is a change in div height? How?
you can do it with directives in their link function. i think you wont mind about so small piece on jquery code
myModule.directive('animateRight', function () {
var linker = function (scope, element, attrs) {
var right = function() {
$(this).animate({
{"height": "800px"},
"fast");
})
}
element.on('click', right);
};
return {
restrict:'A',
link:linker
}
})
<div animate-right class="box"></div>
Ok, so I don't like to answer my own question, but this seems like the way to do it...
I used AngularJS 1.2, along with the new ngAnimate module. You need to add angular-animate.js, and reference the animate module, so at the end here's what my modules looked like:
var app = angular.module('tracker', ['$strap.directives', 'ui.bootstrap', 'ngRoute', 'ngAnimate']);
After that, its super simple, and very much CSS3 animations. My alert line ended up with a class repeat-item:
<alert class="repeat-item" type="alert.type" data-ng-repeat="alert in alerts" close="closeAlert($index)">{{alert.msg}}</alert>
And I added some CSS to target that class with the angularjs triggers:
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity: 0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity: 1;
}
And voila a nice fade in and out animation.
This page really explains very well how to do it. Cheers to Michael Benford for the great link.
I want to use multiple classes to optionally add transitions. Instead of stacking, the previous is getting overridden.
.container { transition: margin .2s; }
.container.t-padding { transition: padding .2s; }
The problem: Property is overridden rather than stacking
http://jsfiddle.net/yz2J8/2/ (The problem)
My temporary solution: Add the previous transition to the rule
.container { transition: margin .2s; }
.container.t-padding { transition: padding .2s, margin .2s; }
http://jsfiddle.net/ZfQcp/6/ (My temporary solution)
What's a better solution??
How can I avoid having to create tons of rules to combine these?
JavaScript could be a cleaner solution as you only need to have 1 CSS rule (the original rule).
If you know the position of you're rule you can do the following.
//First Save The Original Rule
var originalRule = document.styleSheets[0].cssRules[3].cssText;
//Save also the original Hover Rule
var originalHover = document.styleSheets[0].cssRules[4].cssText;
Now originalRule will contain this:
.container{
...
transition: margin .2s;
...
}
And originalHover will contain this:
.container:hover{
...
margin: 10px 0;
...
}
to simply add another transition effect, you can do the following.
document.styleSheets[0].cssRules[3].style.transitionProperty += ",background-color";
document.styleSheets[0].cssRules[4].style.transitionDuration += ",1s";
At this stage, both transitions will take effect.
If you want to only have the original transition, you can either add it manually or simply...
//Delete the Rule
document.styleSheets[0].deleteRule(3);
//Add the Original Rule Back Again
document.styleSheets[0].insertRule(originalRule,3);
If you do so, only the original transition (margin) will take effect, don't forget to also replace the originalHover rule to remove any other effects on hover.
Note:
For Chrome
document.styleSheets[0].cssRules[3].style.webkitTransitionProperty
For Firefox
document.styleSheets[0].cssRules[3].style.mozTransitionProperty
For IE
insertRule and deleteRule do not work, there's these ones instead:
addRule , removeRule
LIVE DEMO FOR CHROME AND FIREFOX