how to add transition animation to this DIV TOGGLE Hid/Show ? - javascript

I have this dive the toggle Hide / Show !! ... It works ok , but I would like to know how to add transition animation to the hide/show ?
this is my JS :
function myFunction() {
var x = document.getElementById("clock1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none" ;
}

You cannot animate the display property. But you can animate the visibility or opacity property in css easily:
// main.html
<div id="clock1" class="hidden">...</div>
// main.css
#clock1 {
visibility: visible;
opacity: visible;
transition: visibility 0s, opacity 0.5s linear;
}
#clock1.hidden {
visibility: hidden;
opacity: 0;
}
// main.js
function myFunction() {
var x = document.getElementById("clock1")
if (x.classList.contains('hidden')) {
x.classList.remove('hidden')
} else {
x.classList.add('hidden')
}
}

Setting display to none will immediately hide the element, which means there is not opportunity for animation/transition of visibility over time.
Perhaps you could consider using opacity instead, to achieve this?
Add the following CSS:
#clock1 {
transition:opacity 1s;
}
Update your JS:
function myFunction() {
var x = document.getElementById("clock1");
// Update opacity rather than display
if (x.style.opacity === "0") {
x.style.opacity = 1;
} else {
x.style.opacity = 0;
}
}
Working jsFiddle here

Related

Javascript Appear-Disappear Animation dont work

I want to make h1 disappear and after 3 sec appear again. It disappears but dont appear again.
Or do i need inline style for it? And any other useful loop for this except if?
let head1 = document.querySelector(".asd")
let head1style = getComputedStyle(head1);
let head1disp = head1style.display;
let changedisp = function() {
if (head1disp === "block") {
head1.style.display = "none";
} else if (head1disp === "none") {
head1.style.display = "block"
} else {
console.log("Something Wrong!")
}
};
setInterval(changedisp, 3000);
h1 {
display: block;
}
<body>
<h1 class="asd">Look at me!</h1>
<script src="app.js"></script>
</body>
</html>
You don't need JavaScript for that in a modern browser. CSS animations with keyframes are fully capable of delivering the same effect:
<style>
#keyframes fade-out-in {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.box {
animation: fade-out-in 5000ms;
/* wait time at the beginning */
animation-delay: 2000ms;
}
</style>
<div class="box">
Hello World
</div>
You will probably need to adjust the timing. Learn more about CSS keyframe animations in this fantastic article - https://www.joshwcomeau.com/animation/keyframe-animations/
You can use setTimeout to do it once.
const h1 = document.querySelector('h1');
h1.style.display = 'none';
setTimeout(() => h1.style.display = 'block', 3000);
Or you can use setInterval to do it every 3 seconds.
const h1 = document.querySelector('h1');
function switchDisplay() {
if (h1.style.display === 'block') h1.style.display = 'none';
else h1.style.display = 'block';
}
setInterval(switchDisplay, 3000);

Trying to make a transition with opacity on images

like my title says, I'm trying to make a transition with opacity (0 to 1 with 2secondes interval) on images, but I don't know how to make it.
The transition only works on the first image but not on the others, and I can't figure it out why.
So I hope you'll help me to understand my mistakes, I'm new on javascript. Thank you in advance, here my code
My HTML file :
<img src="img/1.jpg" alt="slide-photo">
My CSS file :
#slideshow-home img {
width: 100%;
opacity: 0;
transition: 1s ease-in-out;
}
My JS file :
var image = document.querySelector('img');
var img = 1 ;
window.setInterval(changeImage, 2000);
function changeImage() {
image.setAttribute('src', 'img/' + img + '.jpg');
image.style.opacity = 1;
img++;
if(img === 6) {
img = 1;
}
}
This is how i handle fade in transitions for images, the benefit is it doesn't start until the image has actually been loaded so it should never be choppy while fading in
JS
var image = document.querySelector('img');
var img = 1;
window.setInterval(changeImage,5000);
function changeImage() {
image.classList.remove('fadeIn')
image.src = 'img/'+img+'.jpg'
img++
if (img == 6) {
img = 1;
}
}
image.addEventListener('load', () => { // This function looks at the image and every time an image is loaded i.e whenever it gets a new src, it does a fade in animation
void(image.offsetHeight)
image.classList.add('fadeIn')
})
CSS
I normally do this with an animation, like below
#slideshow-home img {
width: 100%;
opacity: 0;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
animation:fadeIn 2s forwards;
}

How stay final state of animation CSS and remove animation property?

I want to stay with final properties of css animation, but remove animation property itself, exmeple:
#keyframes('foo')
{
0% { opacity: 0; }
to { opacity: 1; }
}
at the begining :
.my_element
{
opacity: 0;
}
I apply animation by Javascript, so I got :
.my_element
{
opacity: 0;
}
element.style
{
animation: foo 1s forwards; #with opacity: 1; at the end.
}
And now I need clean up :
.my_element
{
opacity: 0;
}
element.style
{
opacity: 1;
}
How can I do that?
This does exactly what you're asking. On animationEnd, the cleanUp function is passed an object containing the class to remove after the animation, the property to replace on the element, and the property value to replace on the element. Check out the DOM before and after clicking button the and you'll see that this works properly.
var el = document.querySelector(".my_element"),
cleanUp = function(data) {
el.classList.remove(data.remove);
el.style[data.prop] = data.val;
},
startAnimation = function() {
el.classList.add("animate");
};
el.addEventListener("animationend", function() {
var cleanup_data = {
remove: "animate",
prop: "opacity",
val: 1
};
cleanUp(cleanup_data);
});
#keyframes foo {
from { opacity: 0; }
to { opacity: 1; }
}
.animate {
animation: foo 3s forwards;
}
.my_element {
opacity: 0;
}
<div class="my_element">some text</div>
<button onclick="startAnimation()">Start Animation</button>

How to hide elements (with smooth transition) by class with javascript?

I have a group of divs that share the same class (optionsclass). The display is set to block. When a user clicks them the following javascript function is executed the display is changed to none.
function hideBlockElementsByClass(className)
{
var elements = document.getElementsByClassName(className);
for(i in elements)
{
elements[i].style.display = "none";
}
}
The transition between display block and none is quite rough and I would like to make a smoother transition. What's the best strategy to accomplish this?
Use CSS3 :
.className {
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0.2s linear,
opacity 0.2s linear;
-moz-transition: visibility 0.2s linear,
opacity 0.2s linear;
-o-transition: visibility 0.2s linear,
opacity 0.2s linear;
}
.className:hover {
visibility: visible;
opacity: 1;
}
While Sridhar gives a nice CSS3 solution and other mention Jquery.
Here you can find a pure javascript/CSS solution:
https://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript
Try this method
HTML
<div class = "image" onclick = "eff()"></div>
CSS
.transition {
-moz-transition: 2s width;
width: 150px;
height: 100px;
}
Script
function eff() {
var k = document.getElementsByClassName("image");
k[0].className = "transition";
}
try this in plain javascript:(Will work on IE10, chrome, firefox, safari, android, ios)
<script>
function hideBlockElementsByClass(className) {
var elements = document.getElementsByClassName(className);
console.log(elements.length)
for (var i = 0; i < elements.length; i++) {
(function (a) {
elements[a].addEventListener('webkitTransitionEnd', function () {
elements[a].style.display = "none";
}, false);
elements[a].addEventListener('mozTransitionEnd', function () {
elements[a].style.display = "none";
}, false);
elements[a].addEventListener('oTransitionEnd', function () {
elements[a].style.display = "none";
}, false);
elements[a].addEventListener('transitionend', function () {
elements[a].style.display = "none";
}, false);
})(i);
elements[i].style.webkitTransitionDuration = "1s";
elements[i].style.mozTransitionDuration = "1s";
elements[i].style.oTransitionDuration = "1s";
elements[i].style.transitionDuration = "1s";
elements[i].style.opacity = "0";
}
}
</script>

simple fade not working

I've made a simple box with CSS, I'm trying to fade it by dynamically changing it's opacity using the setInterval object.
http://jsfiddle.net/5gqRR/7/
CSS
#box {
margin:0px auto;
margin-top:10px;
height:50px;
width:50px;
background:black;
}
JAVASCRIPT
var fade;
function select(id) {
return document.getElementById(id);
}
function disBox() {
fade=setInterval(function(){
select("box").style.opacity-=0.1;
},300);
if (select("box").style.opacity==0) {
clearInterval("fade");
select("box").style.display="none";
}
else {
select("box").style.display="block";
}
}
The problem is that the "-=" operator starts subtracting the opacity from 0 instead of 1.
Can someone please explain why this happens?
Your check about the opacity should be inside the loop.
function select(id) {
return document.getElementById(id);
}
// Run at loading
window.onload = function () {
// Preload variables
var box = select('box'), opacity = 1, fade;
// Looping
fade = setInterval(function(){
// Calculate and applying opacity
opacity = Math.max( 0, opacity - 0.1 );
box.style.opacity = opacity;
// Stoping loop when box isn't visible
if ( !opacity )
clearInterval(fade);
},30);
};
​Demo: http://jsfiddle.net/5gqRR/8/
You can't set an onload event to div element. Instead of that you can do:
HTML
<div id="box"></div>
JavaScript
var fade;
function select(id) {
return document.getElementById(id);
}
function disBox() {
fade = setInterval(function(){
select("box").style.opacity-=0.1;
},300);
if (select("box").style.opacity==0) {
clearInterval("fade");
select("box").style.display="none";
}
else {
select("box").style.display="block";
}
}
window.onload = (function() {
disBox();
})();
Demo
According to edit
select("box").style.opacity = 1; // add this line to set initial opacity
fade = setInterval(function(){
select("box").style.opacity-=0.1;
},300);

Categories

Resources