I have created an animation when the dialog is opening but I want the same when the Angular dialog is closing.
This is my code for opening dialog with animation:
<div class="container">
<div class="body-container" [ngClass]="getBorderColor()">
</div>
<button mat-dialog-close>Cancel</button>
</div>
.body-container {
animation: animation-name .5s ease-out forwards;
}
#keyframes animation-name {
0% {
transform: translateX(100%); }
100% {
transform: translateX(0%);
}
}
And here is the stackblitz I have created.
https://stackblitz.com/edit/slow-dialog-f5nnnr?file=app%2Fdialog-overview-example-dialog.css
Related
On GIF below, there's parent div, which contain "left-menu" and "app-content". Left menu is animating, using keyframes and translate property
#LeftMenuContainer {
&.menu_hidden {
animation: slide-out 0.6s forwards;
}
&.menu_shown {
animation: slide-in 0.6s forwards;
}
}
#keyframes slide-in {
0% { transform: translateX(-100%); width: 0; }
100% { transform: translateX(0); width: auto; }
}
#keyframes slide-out {
0% { transform: translateX(0); width: auto; }
100% { transform: translateX(-100%); width: 0; }
}
DOM tree looks like this
<div id="contentContainer" class="flex">
<app-left-menu></app-left-menu>
<div>Be smooth!</div>
</div>
Is there any way, to "smooth" transition parent width, when "left-menu" is hiding? I try to add styles for parent, with
transition-property: width;
transition-duration: 0.6s;
but it doesn't work.
https://im2.ezgif.com/tmp/ezgif-2-a1f74da85c.gif
Assume It only flickers when comes to animate, so you can try to use will-change, css-will-change-property
The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed
If you are using framework like React can try to use framer-motion
Is it possible to preserve a CSS property (including variables) after removing a class that modifies them ?
The problem is in the code below.
I want to preserve the transform property of the cyan box after removing the class animation-slide-to-left that slides the box to the left.
That is because when removing that animation-slide-to-left and adding the class animation-slide-to-right class, I want that new animation to start from where the old one ended.
But the problem is when removing animation-slide-to-left the transform property resets and becomes equal to Its old value before adding that class.
Note: I don't want to hard code the transform property at 0%, because there are a lot of animations, and I am searching for a way that automatically solve the problem without JAVASCRIPT.
(expand the snippet result to full page too see the example)
const box = document.querySelector (".animated");
function leftclicked (){
box.classList.remove ("animation-slide-to-right");
box.classList.add ("animation-slide-to-left");
}
function rightclicked (){
box.classList.remove ("animation-slide-to-left");
box.classList.add ("animation-slide-to-right");
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.animated {
animation-duration: 0.5s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.animation-slide-to-left {
animation-name: slide-to-left;
}
.animation-slide-to-right {
animation-name: slide-to-right;
}
#keyframes slide-to-left {
100%{
transform: translate(-150%, -50%);
}
}
#keyframes slide-to-right {
100%{
transform: translate(50%, -50%);
}
}
<div class="center" style="width:300px; height: 300px; background-color: red;">
<div class="center animated" style="width: 50%; height: 50%; background-color:cyan;">
</div>
<button style="float:left;" onclick="leftclicked()">LEFT</button>
<button style="float:right;" onclick="rightclicked()">RIGHT</button>
</div>
You can set the starting position for each time you click on the buttons LEFT and RIGHT in the CSS keyframes, so that when the button is on the left side and click on the RIGHT button, it first sets the position to the left side (0%) before it animates to the right (100%) and vice-versa. This way it doesn't reset back to the center when clicking the buttons.
const box = document.querySelector (".animated");
function leftclicked (){
box.style.transform = 'translate(50%, -50%)';
box.classList.remove ("animation-slide-to-right");
box.classList.add ("animation-slide-to-left");
}
function rightclicked (){
box.style.transform = 'translate(-150%, -50%)';
box.classList.remove ("animation-slide-to-left");
box.classList.add ("animation-slide-to-right");
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.animated {
animation-duration: 0.5s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.animation-slide-to-left {
animation-name: slide-to-left;
}
.animation-slide-to-right {
animation-name: slide-to-right;
}
#keyframes slide-to-left {
100%{
transform: translate(-150%, -50%);
}
}
#keyframes slide-to-right {
100%{
transform: translate(50%, -50%);
}
}
<div class="center" style="width:300px; height: 300px; background-color: red;">
<div class="center animated" style="width: 50%; height: 50%; background-color:cyan;">
</div>
<button style="float:left;" onclick="leftclicked()">LEFT</button>
<button style="float:right;" onclick="rightclicked()">RIGHT</button>
</div>
Well It turns out that it is unnecessary to create such behaviour without JavaScript.
Because if a CSS class is being replaced at runtime, we are already using JavaScript.
So the solution is to set the transform property in JavaScript after removing the old class and before adding the new class
Try using this JSFiddle in Chrome and in Firefox.
Here's the code:
(HTML)
<div class="slide-down">
<h1>Hello!</h1>
</div>
(CSS)
.slide-down {
font-size: 3em;
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-moz-animation-name: slideDown;
-webkit-animation-name: slideDown;
}
#-moz-keyframes slideDown {
0% {
-moz-transform:translateY(-300px);
}
100% {
-moz-transform:translateY(0px);
}
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-300px);
}
100% {
-webkit-transform: translateY(0px);
}
}
My issue is that it works in Chrome but only works in Firefox when the starting coordinates (at the "0%" point of the animation) of the animated div are within the viewport. Otherwise, it can completely skip the animation. Try changing the translateY() parameter to something more conservative, like -50px, and it will work.
Is there a workaround for this? It would be nice to be able to bring something in from outside the screen without having to write a script to figure out what its initial y-coordinate should be.
I would consider animating the margin instead:
.slide-down {
font-size: 3em;
animation:slideDown 3s forwards;
}
#keyframes slideDown {
0% {
margin-top:-300px;
}
100% {
margin-top:0;
}
}
<div class="slide-down">
<h1>Hello!</h1>
</div>
I'm new to angular, and I have a CSS stylesheet with animations i want to apply to a view when it is called. I tried searching online but I don't understand the information.
My CSS:
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft{
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
My first view(the one that's loaded first):
<body id="login">
<div>
<div id="container" class="container-fluid">
#RenderBody()
</div>
</div>
</body>
My partial view:
<div class="animated fadeInLeft">
<h1 class="large">Welcome.</h1>
</div>
When the page is loaded where there is renderbody() my partial view will be.
I want to to put a fadeInLeft animation on it when it is called by the first view.
I hope my question is clear enough, I'm really very new to Angular, and used to working with CSS animations on regular Html.
I would recommend using ngAnimate module.
Then write your CSS like-
.animated .ng-enter {animation: fadeInLeft 1s both ease-in;}
I've tried it in Chrome and Safari and the animation runs every time when I press the Open link, but in Firefox the animation only runs the first time I press the link. After that, when I press the link it doesn't load the animation. Is there anything I can do to make the animation run every time I press the link?
Here's what I'm working with:
http://jsfiddle.net/p5hkyovs/4/
<div id="over">
<div class="animation">Fade in - Back</div>
</div>
<div id="start">
Open
</div>
CSS
#over {
display: none;
}
#over:target {
display: inline-block
}
#over:target ~ #start {
display: none;
}
div.animation {
-webkit-animation:fadeIn .5s ease-in-out;
-moz-animation:fadeIn .5s ease-in-out;
animation:fadeIn .5s ease-in-out;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I think the problem is the missing mozilla vendor prefix for the animation-name: fadeIn; value.
Try this JSFIDDLE