when we collapse transition is not good - javascript

When we expand transition is smooth but when we collapse transition is not good... when its about to collapse I see a shake.
I played with transition but its not working. Can you help me providing my code in the fiddle?
.accordion-section {
border-bottom: solid 1px #000;
}
.accordion-section > h3 {
padding: 6px;
font-size: 16px;
background-color: #CCC;
margin: 0;
}
.accordion-section > .body {
height: 0;
padding: 0 10px;
overflow-y: hidden;
transition: height .5s;
transition: height .5s, padding-top .5s, padding-bottom .5s;
}

You can transition max-height instead of height and enclose the body content with padding, etc inside of the element you're transitioning (added .body-inner in .body). I also added a transition for scale() as it will cause a more "accordion" style collapse, but you can try it without that.
with scale() - http://jsfiddle.net/b4L6kyg4/93/
without - http://jsfiddle.net/b4L6kyg4/94/

Just give the initial div background color green. when the accordion is closing it doesn't have any background so it makes it look as if the div is flickering.
.accordion-section > .body {
background: green;
}

There are a couple of things you can do:
First, accelerate some device's hardware by using -webkit-transform: translate3d(0,0,0); . Second, use the CSS animation property transition timing function. I am not sure which effect you are trying to achieve, but you have "ease" on certain elements. Try experimenting with "ease-out". Third, the CSS transitions you're using may not be aligned perfectly with your elements, so when the transition finished running, the div snaps back to its place. A quick patch for this problem may be animation-fill-mode: forwards; . Your fiddle does not have the actual #keyframes for animation, so it is hard to give you any further advice.

Related

Background-image suddenly disappears on certain screen sizes on Chrome

On my site I have a container in which numerous divs containing one i elements with background-images are rendered. Those i elements all have the same background-image but with different background-positions so that only one http request has to be made, which is general best practice for smaller icons. The divs should be horizontally centered in the container.
My problem is that on Chrome and Firefox browser (latest versions) the rendering of the background images is not working as intended on certain (wide) screen sizes. Specifically on Chrome it will always not show some of the elements background-image unless the element is hovered and on Firefox it will not render background images at all.
If I add float: left to the divs inside the container the rendering issue is solved. However I want to have the elements centered in the container which does not work with the float left.
My question is what am I doing which is causing this behaviour on certain browsers and how can I try to resolve it?
You can have a look at this problem for yourself on:
http://staging.koreanbuilds.net
Here is a screenshot of the behaviour on Chrome and on Firefox
This is the css code for the container and elements:
/* Container of clickable champion icons */
#champContainer {
width: 100%;
padding-right: 10px;
padding-left: 10px;
text-align: center;
position: relative;
}
/* Champion images div container class */
.champIcon {
width: 65px;
height: 65px;
margin: 1px auto;
overflow: hidden;
}
.champIcon i {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
}
.champIcon i:hover {
zoom: 1.05;
cursor: pointer;
-moz-transform:scale(1.05);
-moz-transform-origin: 0 0;
}
Additionally the divs have one of those two classes
.nodisplay {
display: none;
}
.yesdisplay {
display: inline-block;
}
The i elements always have the following class
.chmp {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
text-align: left;
cursor: pointer;
}
as well as a class defining the background-image and position for example
.chmpashe {
background-image: url(http://statics.koreanbuilds.net/champion_65x65/sprite.png);
background-position: 0 -455px;
width: 65px;
height: 65px;
}
I don't see anything wrong with your code. It looks like this might be the same issue you are seeing here as I can't seem to load your spritesheet on it's own in Firefox
It might be worth cutting your sprite sheet down and testing if that works.
hope that helps!
edit:
Looking at your live site you have a more traditionally shaped stylesheet which doesn't go beyond 1000 pixels in ether dimension. It looks like the one you are using on staging goes beyond 80,000 pixels which looks to be where your issue is.

Bootstrap collapse has a jumpy transition

I have a problem with the transition of the bootstrap navbar.
the collapse has a jumpy transition when the collapsing element has padding
I googled this issue and it seems that the problem is the padding:
.menu-menu-container{
padding: 100px 30px 60px 30px;
background-color: yellow;
}
In fact if i remove the padding from menu-menu-container element, the animation works well, and it is very smooth
This is my codepen: http://codepen.io/mp1985/pen/EyOJYE
How can I achieve the same result without this weird issue?
The issue is caused by the padding of the container you are collapsing. It complicates the calculation of the height by collapse.js
Example:
HTML
<div class="collapsible-div padding-values">
// YOUR CONTENT
</div>
CSS
.padding-values{
padding: 20px 40px 30px;
}
this will be fixed if you move the padding to an inner container:
HTML
<div class="collapsible-div">
<div class="new-container padding-values">
// YOUR CONTENT
</div>
</div>
Its happening because of max-height of navbar-collapse class which is 340px use below code to handle it.
http://codepen.io/rahulchaturvedie/pen/VjVOLa
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height: none;
}
Try adding a CSS transition the affected items. This will make the transition less jump as the browser will animate between the various paddings. You can target each CSS animatable property with there own timing properties. You can see all the various animatable properties here: http://www.w3schools.com/cssref/css_animatable.asp
// will want to make this selector more targeted/meaningful
* {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

Can an HTML background be moved with jQuery's animate?

On my webpage, I have the background image set with CSS, using the HTML selector. The background image is basically like a blueprint schematic background. (i.e. A white grid on a blue background.)
CSS:
html
{
display: block;
position: absolute;
background: url(../assets/background.jpg) repeat;
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
}
When the end user clicks a button, I want the background image mentioned above to slide off the screen, towards the top-right direction, making the page appear to be going to a different area on the large blueprint schematic. I am using jQuery, but I cannot figure out how to access the background image from the CSS.
JavaScript:
$("#button").click(function()
{
// Animate the webpage's background, causing it to move
$("html /* Not sure what goes here */").animate({left: "-=10000px", top: "-=5000px"}, 1250);
});
I have tried using a div in the body that matches the width and height of the end user's screen, but a thick, white border appears around the blueprint schematic image, so I guess I will have to stick with adding the image through CSS, on the HTML selector.
How do I achieve the effect that I desire?
https://jsfiddle.net/zaevzm5p/
Working Fiddle
Don't animate the complete HTML as it will animate your whole website so I created a div with the background you wanted instead of setting the background of HTML.
HTML
<body>
<div id="div1"></div>
<button id="button">Click Me</button>
</body>
CSS
#div1 {
position: absolute;
background: url(http://www.austintexas.gov/sites/default/files/files/Animal_Services/cute-kitten-playing.jpg) repeat;
top:0; left:0; height:100%; width:100%;
/* I want *only* this background image to move on the button click */
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
z-index:-1;
}
jQuery
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("#div1").animate({
left: "-=10000px",
top: "-=5000px"
}, 1250);
});
I use a div instead of the html itself,try this
solution 1
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("#div1").animate({
left: "-=10000px",
top: "-=5000px"
}, 1250);
});
It can be achieved with CSS transitions too:
Fiddle Example
Less JS, plus CSS
-webkit-transition: 1.25s ease-in-out;
-moz-transition: 1.25s ease-in-out;
-o-transition: 1.25s ease-in-out;
transition: 1.25s ease-in-out;
You could create a div as in void's answer and just animate it's position.
The best and easiest solution would be to use css3 (just google it).
To provide a solution to your original question, you can (if the browser supports it), animate the background position like so:
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("html /* Not sure what goes here */").animate({
'background-position-x': "100px",
'background-position-y': "100px"
}, 1250);
});
But this is not best practice.
Working fiddle

Javascript Make div appear from top to bottom

I hope my question makes sense, but what im trying to do is: show a div by transition. Meaning i want the div to slowly appear from top to bottom or from left to right, almost like a fade. Is this possible with either javascript or jquery?
It is possible, if i understand u need something like this:
http://jsfiddle.net/e5BuX/
$(document).ready(function(){
$(".cube").animate({left:"400px",opacity:"1"},2000);
});
If I understand the question correctly, the closest thing is the jQuery slideUp() or slideDown() methods. they are not a fade exactly, but like I said, probably the closest thing ( I am not a JavaScript/jQuery expert though).
here is a site that demonstrates how they look.
EDIT: Here are some other good examples of custom animations you can do with the animate() method
Hope that helps!
Its possible with vanilla javascript and jQuery.animate but it can also be done entirely css3 transition & animate. Take a look here for example
It can also be done only with css3. Here's a rough ideea.
HTML
<div class="im-a-div animate-me im-hidden">
<span class="center-me">I'm inside the div!</span>
</div>
<input id="show-the-div" type="button" value="Show div"/>
CSS
.im-a-div {
background: #ddd;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
position: relative;
opacity: 1;
width: 400px;
}
.im-hidden {
margin-top: -100%;
opacity: 0;
}
.animate-me {
-webkit-transition: all 1000ms 0s ease-in-out;
-moz-transition: all 1000ms 0s ease-in-out;
-ms-transition: all 1000ms 0s ease-in-out;
transition: all 1000ms 0s ease-in-out;
}

How get dimension of HTML shadow element via JavaScript

I'm displaying tooltips via pure CSS3 but the only problem I have is that the content of the tooltips has really different lengths. Some of them are just 1 line long, others up to 4 lines.
Now are these tooltips Shadow DOM elements, so how could I get the (different) height of these tooltips via JavaScript (or a pure CSS solution would be better (maybe CSS calc?)) to adjust the margin that all tooltips have the margin from the anchor element?
HTML:
Test #1
Test #2
CSS:
a:before {
content: attr(data-title);
position: absolute;
background: blue;
padding: 7px 10px;
width: 440px;
max-height: 72px;
text-align: left;
line-height: 18px;
margin: 0 0 0 0;
opacity: 0;
color: white;
transition: opacity 0.15s ease-out 0.25s, margin-top 0.15s ease-out 0.25s;
}
a:hover:before {
opacity: 1;
margin-top: -40px;
transition: opacity 0.2s ease-out 0.5s, margin-top 0.2s ease-out 0.5s;
}
Live demo: http://jsfiddle.net/qq3YJ/
This is the jsfiddle solution: http://jsfiddle.net/kwJz9/2/
This is what I did:
Make a relative, so this means that a:before element will have position relative to his parent a.
To place tooltip right under links I used bottom attribute instead of margin-top. Because I used position: relative to link - this means that bottom:0 for example it is when tooltip has it's bottom border right on the bottom border of the parent a.
Because you want to see tooltips under links - in :hover I changed bottom to 1.4em, which is little bit under text (.4em will be distance between them).
Because you want to see it animated I changed transition to include bottom property instead of 'margin-top'.
The last problem was that because you had :before element always in html flow - in case of second tooltip (which is big) - it occupies more space than a, so when you hover it (not the link) - you can see it. So I also added visibility: hidden to :before element to make sure that if mouse will be over it you will not see it.

Categories