I'm using angular animation and everything works well but I want to know if I can animate layout shift.
For example in this video, when that add task component get vanished, tasks section get snaped up immediately. Help me if I can animate it.
Check this Video --> https://drive.google.com/file/d/1-c4S0L2EciXcQFvR2JClX06XhGTu5ioQ/view?usp=drivesdk
Looks like you may be animating the scale property of your component.
One suggestion might be instead to animate the height of the parent element.
This example is plain javascript/html/css but the concept carries over easily to an angular animation.
const btn = document.getElementById("animate-btn");
const outer = document.getElementById("outer");
btn.addEventListener('click', function() {
outer.classList.toggle('collapsed');
});
#outer {
min-height: 0;
height: 200px;
width: 200px;
padding: 10px;
background: lightblue;
transition: height .5s ease-out;
}
#outer.collapsed {
height: 0;
}
#inner {
background: pink;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
}
<div id="outer">
<div id="inner">
<div>
Content
</div>
</div>
</div>
<button id="animate-btn">Animate</button>
Related
Update:
I've added a screen record to show the problem. This is reproduced in browserStack ie11, with the "run code snippet" button in this question.
I'm working on a dropdown menu, which needs to work in IE11. However the flex container twitches when the menu opens up. Not using flex on the container or not using the button tag would solve the problem, however the container is outta my control and I'd prefer to use button if it is possible. Does anybody know what is wrong with this?
var handle = document.getElementsByTagName('button')[0];
var inner = document.getElementsByClassName('inner')[0];
var dropdownOpen = false;
handle.addEventListener('click', function() {
dropdownOpen = !dropdownOpen;
inner.style.height = dropdownOpen ? '80px' : '0';
});
.outter {
background: green;
padding-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
margin: 10px;
width: 300px;
background: white;
padding: 10px;
}
.container {
position: absolute;
background: yellow;
}
.inner {
overflow: hidden;
transition: height 0.2s ease-out;
}
<div class='outter'>
<h1>title</h1>
<div class='main'>
<button>handle</button>
<div class='container'>
<div class='inner' style='height: 0'>
content
</div>
</div>
</div>
On a desktop the div with class="content" will be visible when hovering on the div with class="button". There is also a callback so it automatically fades out when hovering somewhere else.
But, this is not working on a mobile device because it is not possible to hover. I tried different solutions like adding other pseudo-classes (:active, :focus) and tried some JavaScript / jQuery. I also found this question How to simulate hover effect on touch devices?. I think JS is the best way to solve this problem but I am not used to work with that.
Here is my HTML code:
<div class="home">
<div class="button">
<div class="content"></div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.home {
display: flex;
justify-content: center;
align-items: center;
background-color: #3d2885;
width: 100vw;
height: 100vh;
}
.button {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 50vmin;
height: 50vmin;
background-color: white;
border-radius: 50%;
}
.content {
width: 0vmin;
height: 0vmin;
background-color: lightgreen;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.button:hover .content {
width: 25vmin;
height: 25vmin;
border-radius: 15%;
}
And I tried some jQuery:
$('.button').bind('touchstart', function() {
$(this).addClass('content');
});
$('.button').bind('touchend', function() {
$(this).removeClass('content');
});
Can anyone tell me how I can implement jQuery (or something else) so that a click event on a mobile device has the same effect as a hover effect on a desktop?
In this case I mean that the div with class="content" has a transition effect (growing) on clicking and a transition effect (shrinking) on clicking somewhere else.
Codepen example: https://codepen.io/elinehendrikse/pen/JJVRLm?editors=0110
I am trying to animate a div upwards when a user hovers on the div.
I am able to animate the div making it bigger, however the animation happens downwards. I am trying to keep the bottom of the div remain in the same place, and have a smooth animating increasing the size of the div upwards.
See jsfiddle here which demonstrates what my code is currently doing.
Please see code below:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
}
.content:hover {
height: 110%;
}
<div class="box">
<div class="content">TEST</div>
</div>
You can do this using transform:scaleY() and set the transform-origin to bottom. I also put a margin-top:100px to see the effect better. Also you can use transition to make the scale smoother
You also need to scale back the text.
See here: jsfiddle
You need to scale the text back to it's original state in the same time that you scale the div. so if you scale the div 2 times. You need to scale back the text with 1/2 , same if you scale 3 times...scale back with 1/3
In this case you enlarge .content by 1.5 so you need to scale down the text inside by 1/1.5 = 0.66
Code:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top: 300px;
transition:0.3s;
}
.content:hover p {
transform: scaleY(0.66)
}
.content:hover {
transform: scaleY(1.5);
transform-origin: bottom;
}
<div class="box">
<div class="content">
<p>
TEST
</p>
</div>
</div>
Try it like this (I have no other idea...): You can give to the class "box" a bigger height (I put a red border around, so you can see it) than the class "content". After that, you can use flexbox, to put the class "content" on the bottom. After that, you can do it with hover to change your heigth upwards and fill it. With transition you can make a nice animation. I hope this is good enough. Perhaps there is also a way with jQUery at the moment I havn't got an idea. Let me know, if this helps you (I'm not sure if I understanded the question well) - Cheers. (Important: This heights and so on are just random values for testing)
.box {
display: flex;
justify-content: flex-end;
flex-direction: column;
height: 100px;
border: 1px solid red;
}
.content {
background-color: #e3e4e6;
height: 50px;
width: 100%;
text-align: center;
-webkit-transition: height 1s;
/* Safari */
transition: height 1s;
}
.content:hover {
height: 100%;
}
<div class="box">
<div class="content">TEST</div>
</div>
If you just want to use css, just use:
.content:hover {
margin-top: -50px;
height: 110%;
}
See jsFiddle
since there isn't any space at top to expand, you may give an extra margin initially and remove it on hover like this JsFiddle -
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
margin-top:25px;
}
.content:hover {
height: 110%;
margin-top:0;
}
Set top property with the value of height - 100 * -1
https://jsfiddle.net/x3cL1cpt/7/
.content:hover {
height: 110%;
top: -10%;
position: relative;
}
Why position relative? It's because I move the box, but without modifying the space that the box occuped. If you need to modify that space, change top with margin-top.
Replace this CSS with your current, needed to add transition:
.box {
height: 170px;
padding-bottom: 15px;
width: 50%;
}
.content {
background-color: #e3e4e6;
height: 100%;
text-align: center;
transition: 1s all ease;
}
.content:hover {
transform: scaleY(1.2);
transform-origin: bottom right;
}
I've spent some time working on a slider that has a div follow the thumb of slider. I did this by creating a relatively positioned container for the follower (called #slider-follower-cntnr). I then adjust the position of the follower div (#slider-follower) according to the value of the range input. The problem is that as you move the thumb across the track the follower does not stay perfectly centered against the position of the thumb. I've tried adjusting the width of the #slider-follower-cntnr but I don't no how to find the correct width to keep it perfectly centered. Thanks for any help.
TL/DR: How can I keep follower div centered perfectly to the thumb of the range input across all range values?
Heres a codepen. You may need to full screen to see it get off center as you pull it along the range.
HTML
<div id="slider-cntnr">
<input type="range" id="frame-slider" oninput="updateFollowerValue(this.value)" />
<div id="slider-follow-cntnr">
<div id="slider-follow">
<div id="slider-val-cntnr">
<span id="slider-val"></span>
</div>
</div>
</div>
</div>
JS
var follower = document.getElementById('slider-follow');
var follower_val = document.getElementById('slider-val');
var slider = document.getElementById('frame-slider');
var updateFollowerValue = function(val) {
follower_val.innerHTML = val;
follower.style.left = (val*1) + '%';
};
updateFollowerValue(slider.value);
CSS
html, body {
width: 100%;
height: 100%;
}
#slider-cntnr {
width: 80%;
margin: 40px;
position: relative;
display: flex;
flex-direction: column;
background: orange;
}
#frame-slider {
width: 100%;
margin: 0;
}
#slider-follow-cntnr {
position: relative;
background-color: blue;
height: 10px;
margin: 0 auto;
width: 98%;
}
#slider-follow {
background-color: black;
width: 30px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
margin-left: -15px;
}
#slider-val-cntnr {
background-color: white;
width: 25px;
height: 20px;
}
#slider-val {
margin-left: 9px;
}
Few ways you can fix this:
(1) In the HTML
<div id="slider-val-cntnr">
<center>
<span id="slider-val"></span>
</center>
</div>
(2) In the CSS
#slider-val {
margin-left: auto;
margin-right: auto;
}
(1) The HTML method probably works the best, but it's generally not best practice to have <center> tags throughout your HTML.
(2) This will make sure that the number never goes beyond the bounds of the white box that it resides in. If you don't care that it is absolutely centered, and just want the number to not exit the box, then this is a suitable solution.
I am creating a sequence of transitions/animations, so therefor this particular example I need to have a javascript solution and not a css keyframe solution.
I am using delays for a lot of my different sequences and I am trying to do the same with a new background color, but for some reason using the addClass function is not working for me.
Why is this not working for me?
//$(".blue").delay(2500).addClass("green-fill");
$(".green-fill").delay(2500).addClass("green-fill");
.blue {
background-color: #0085A1;
width: 100%;
height: 100vh;
position: relative;
text-align: center;
}
.green-fill {
display: none;
background: green;
width: 100%;
height: 100vh;
position: relative;
text-align: center;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue">
<div class="green-fill">
Hello
</div>
</div>
CSS
.green-fill {
background: green;
width: 100%;
height: 100vh;
position: relative;
text-align: center;
z-index: 1;
transition:background-color 1s;
}
.green-fill.blue{
background-color:#00f;
}
jQuery
setTimeout(function(){
$(".green-fill").addClass("blue");
},2500);
// That's why css keyframes are better...
// For smooth ease back : the trick is to copy the color being rendered, then remove class, and then finally remove the inline generated code.
setTimeout(function(){
var $gb = $(".green-fill");
var color = $gb.css("background-color");
$gb.css("background-color",color).removeClass("blue").css("background-color","");
},5000);
You are trying to add the class "green-fill" to the exact same class "green-fill". Therefore the class is imediatly applied to the div. Change the class of to something else or give it an id (like I did in the example below).
Javascript:
//$(".blue").delay(2500).addClass("green-fill");
$("#fill-it").delay(2500).addClass("green-fill");
Markup:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue">
<div id="fill-it">
Hello
</div>
</div>
CSS can stay the same.