I have some problem with repeating animation in Firefox and Chrome.
I use simple js to make it repeatable.
(function step() {
setTimeout(function() {
var coin7 = document.getElementById('coin7');
coin7.style.display = 'block';
coin7.style.height = "210px";
}, 2000)
setTimeout(function(){
coin7.style.display = "none";
coin7.style.height = "0";
},6000);
setTimeout(step, 7000)
})();
Demolink http://jsfiddle.net/pe461zrn/
First iteration is ok in all browsers, but second and next doesn't apply css transition in FF39 and latest Chrome. And it's still work fine at all iteration in IE11.
How can I fix it?
try applying height with timeout 0 so you are sure it happens after display is set to block (which is something that would prevent animation)
setTimeout(function(){coin7.style.height = "210px";}, 0);
Try this..
Just remove coin7.style.display = 'none'; and thats the solution
HTML
<div id="coin7" style="">
<img src="http://us.cdn4.123rf.com/168nwm/kristijanzontar/kristijanzontar1101/kristijanzontar110100013/8612198-.jpg" />
</div>
CSS
#coin7 {
overflow: hidden; display: block; height: 0px;
-moz-transition: all 3s ease-in-out;
-webkit-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;
}
Javascript
(function step() {
setTimeout(function() {
var coin7 = document.getElementById('coin7');
coin7.style.display = 'block';
coin7.style.height = "210px";
}, 2000)
setTimeout(function(){
coin7.style.height = "0px";
},6000);
setTimeout(step, 7000)
})();
Check out this Fiddle
Related
I have created a box to toggle between appearing and disappearing via a toggle button.
The problems are:
The first time, the appearing height is sharp and not smooth.
The disappearing height is happening sharp and at the end instead of smooth.
I am not a web expert. All I have written are what I have got from different places and assembled. Please feel free to fix any other CSS/JS mistakes too. But the above issues are what I am mainly looking for.
function toggle_elem()
{
var elem = document.getElementById('elemid');
if(elem.style.display == 'none')
{
elem.style.display = 'block';
window.setTimeout(function(){
elem.style.opacity = 1;
elem.style.transform = 'scale(1)';
elem.style.height = '100px';
},0);
}
else
{
elem.style.transform = 'scale(0)';
window.setTimeout(function(){
elem.style.display = 'none';
elem.style.height = '0';
}, 300);
}
}
#elemid {
border: 1px solid black;
opacity: 0;
transform: scale(0);
transition: height 0.3s, width 0.3s, padding 0.3s, visibility 0.3s, 0.3s ease opacity, opacity 0.3s ease-out, 0.3s ease transform;
}
<div>
<button onclick="toggle_elem()">Toggle</button>
</div>
<div id="elemid" style="display:none">aaaaa</div>
<div>
<button >Next button</button>
</div>
You're almost there for the smooth transition in disappearing animation.
The only thing you need to modify is this
elem.style.transform = 'scale(0)';
//this is to support the css animation
elem.style.height = '0'; //move your height set outside of `setTimeout`
window.setTimeout(function(){
//only set `display` none after the animation completed
elem.style.display = 'none';
}, 300);
Full code
function toggle_elem() {
var elem = document.getElementById('elemid');
if (elem.style.display == 'none') {
elem.style.display = 'block';
window.setTimeout(function() {
elem.style.opacity = 1;
elem.style.transform = 'scale(1)';
elem.style.height = '100px';
}, 0);
} else {
elem.style.transform = 'scale(0)';
elem.style.height = '0';
window.setTimeout(function() {
elem.style.display = 'none';
}, 300);
}
}
#elemid {
border: 1px solid black;
opacity: 0;
transform: scale(0);
transition: height 0.3s, width 0.3s, padding 0.3s, visibility 0.3s, 0.3s ease opacity, opacity 0.3s ease-out, 0.3s ease transform;
}
<div>
<button onclick="toggle_elem()">Toggle</button>
</div>
<div id="elemid" style="display:none">aaaaa</div>
<div>
<button>Next button</button>
</div>
I have this page with menu-link (#navBtn), and #mobileLinks div that opens and closes when clicking #navBtn.
I would like to add fade-in animation when #mobileLinks div is opened, and fade-out animation when the #mobileLinks div is closed. I would like to achieve this with pure JavaScript.
I managed to insert the fade-in animation already, but don't know how to add the fade-out animation as well.
var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");
button.onclick = function(){
if(content.className == "open"){
content.className = "";
content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
{duration: 1500, fill:'forwards'})
} else{
content.className = "open";
}
};
#navBtn
#mobileLinks {
display: none
}
#mobileLinks.open {
display: flex;
}
You can handle the styles entirely in CSS, and only toggle a class with Js.
With CSS & Js
const menu = document.getElementById("menu")
function toggleMenu() {
menu.classList.toggle("isOpen");
}
#menu {
opacity: 0;
transition: opacity 0.2s ease-out;
}
#menu.isOpen {
opacity: 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
Or with JS only
const menu = document.getElementById("menu")
menu.style.opacity = '0'
menu.style.transition = "opacity 0.2s ease-out"
function toggleMenu() {
// Toggle between 0 and 1
menu.style.opacity ^= 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
You can achieve it using jquery effect
To show your element, use fadeIn() and to hide an element, you can use fadeOut()
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeOut();
$("#div3").fadeToggle();
});
});
</script>
You can do it with JS. You can change the opacity of the element to hide it and along with css transition property to make fade effect
var container = document.getElementById("container")
function clicked() {
if (container.style.opacity == 0) {
container.style.opacity = 1
}
else {
container.style.opacity = 0
}
}
#container {
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div id="container">Some Text</div>
Submit
I am working on a new site that is using page transitions. The old content fades away and the new content fades in - at least that's what should happen.
When the new content is loaded, I use JS to set it's opacity: 0
this.newContainer.style.opacity = 0;
Then, I add a new class so I can use CSS transitions
this.newContainer.classList.add("animate-in");
This is the CSS for the .animate-in
.wrapper.animate-in {
opacity: 1;
visibility: visible;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
However, this doesn't work. The code doesn't animate the opacity from 0 to 1. Instead, it is animating backwards, from 1 to 0. It seems like the classList.add doesn't hear the previous line of code.
Anyone know how to fix this?
EDIT
OK, so I learned that using the JS style.opacity will completely override any opacity CSS rules. This is my problem. How do I get around this?
Try to use css animation and remove code--> this.newContainer.style.opacity = 0;
.wrapper.animate-in {
opacity: 1;
transition: all 1000ms ease-in-out;
animation: animate-in01 1s;
animation-iteration-count: 1;
}
#keyframes animate-in01{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I want to add some transition when #div getting timeout. I also add webkitTransition in setTimeout method but not found transition. please help me also edit my code.
<!DOCTYPE html>
<html>
<body>
<style>
#div {
opacity: 1;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;
background:#BD5557;
position: absolute;
height: 500px;
width: 960px;
}
</style>
<div id="div">Display out after 1 second</div>
<script>
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){ x.style.display='none';x.style.webkitTransition = 'opacity 2s ease-in-out';
x.style.transition = 'opacity 2s ease-in-out';}, 1000);
}
displayOut();
</script>
</body>
</html>
</body>
</html>
The problem is that you are trying to apply display:none; at the same time you apply the transition.
Also there is no need to reapply all the css transition properties if they are declared in the css.
function displayOut() {
var x = document.getElementById('div');
setTimeout(function(){
x.style.opacity='0';
}, 1000);
}
displayOut();
Here is a working example
I am trying to change the background image of an div without having any effect on the content inside the div. i wrote following code to change the background-mage. I didn't understand why firefox doesn't respond to my css transition. is there any fix by which i can make it to work in ie and firefox.
Html
<body>
<header>
</header>
</body>
Css
body {
margin: 0;
}
header {
height: 665px;
width: 100%;
background-image: url('image0.jpg');
-moz-transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
}
Jquery
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.src = array[i];
preloadImages.list.push(img);
}
}
var imageURLs = [
"image0.jpg",
"image1.jpg",
"image2.jpg",
"image3.jpg",
"image4.jpg"
];
preloadImages(imageURLs);
var counterForBackgroundImage = -1;
function changeBackgroundImage() {
counterForBackgroundImage++;
if (counterForBackgroundImage > imageURLs.length-1)
counterForBackgroundImage = 0;
$('header').css('background-image', 'url(' + imageURLs[counterForBackgroundImage] + ')');
setTimeout(function() {
changeBackgroundImage();
}, 5000);
}
changeBackgroundImage();
background-image animate property is not listed at w3c animatable list.
Try using some trick such as this.