This question already has answers here:
Show / Hide elements with animation
(4 answers)
Closed 9 months ago.
This post was edited and submitted for review 9 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Now that Bootstrap 5 has dropped jQuery I am going through a project and 'slimming it down' with standard JS. However there is one part where I was using jQuery to provide a transition effect using:
$('#form-1').hide('slow');
$('#form-2').show('slow');
I can replace this with standard JS using:
document.querySelector('#form-1').style.display = 'none';
document.querySelector('#form-2').style.display = 'block';
However, this results in an instant transition :( Is there a way to slow the transition using standard JS?
Note: the effect was not to fade or to slide in or out the forms but it assembled the forms with a build like effect. I.e. this was not a change in opacity nor was it an animated motion effect. BTW I'm also looking to see if anyone knows of a JS equivalent to the previous jQuery rather than adding some CSS.
I'v made a quick function hope it helps make sure to pass in the height and width. It slowly makes the opacity 0 and the height and width 0
function hideSlowly(element, width, height){
let el = document.querySelector(element);
el_opacity = 1;
el_h = parseInt(height);
el_w = parseInt(width);
let s = setInterval(function(){
el.style.opacity = el_opacity;
el_opacity -= 0.2;
el.style.height = el_h + "px";
el_h -= 2;
el.style.width = el_w + "px";
el_w -= 2;
if(el_opacity <= 0){
el.style.display = "none";
// hide the element
// opacity is 0 and element is hidden so clear interval
clearInterval(s)
}
}, 100)
}
https://jsfiddle.net/9hjstuq7/
Here is an example
From: CSS display none and opacity animation with keyframes not working
I set it up below as an onhover event using css.
#form-1:hover {
animation: 3s fadeOut;
-webkit-animation: 3s fadeOut;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
99% {
opacity: 0;
z-index: 1;
}
100% {
opacity: 0;
display: none;
position: fixed;
z-index: -5;
}
}
<form id="form-1">
it's like totally a form broooooooooooooo
</form>
Related
Ok from looking previously I heard that I could use a callback function to make a jquery load function synchronous.
For context I'm trying to do a crossfading transition that is triggered from an onclick function. Basically I want to ensure that the content on bottom has loaded before the top starts going transparent but that doesn't always happen clearly, there is an image on them which quite clearly hasn't loaded by that time, is there a fix to ensure it waits?
Below is a simplified version of the code to show the issue. Help would be appreciated.
if (onTop === true) {
onTop = false;
$("#bottom").load(Location, function() {
setTimeout(function() {
if (onTop === false) {
document.getElementById("bottom_container").style.zIndex = 0;
}
}, 800);
document.getElementById("top_container").style.opacity = 0;
document.getElementById("bottom_container").style.height = null;
var bottomContainerHeight = document.getElementById("bottom_container").clientHeight;
document.getElementById("top_container").style.height = (bottomContainerHeight) + "px";
//Makes sure the top content is equal in height to the top content as to not overflow past it.
});
}
else {
onTop = true;
$("#top").load(Location, function() {
document.getElementById("bottom_container").style.zIndex = -2;
document.getElementById("top_container").style.opacity = 1;
document.getElementById("top_container").style.height = null;
var topContainerHeight = document.getElementById("top_container").clientHeight;
document.getElementById("bottom_container").style.height = (topContainerHeight) + "px";
//Makes sure the bottom content is equal in height to the top content as to not overflow past it.
});
}
You could accomplish this using CSS animations and/or transitions.
The z-index doesn’t matter in this case.
Since you’ll be fading the elements in and out, it doesn’t matter what layer they’re on.
#keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade-in {
animation: fade 500ms linear 0 1 normal forwards;
}
.fade-out {
animation: fade 500ms linear 0 1 reverse forwards;
}
Then you can just toggle the classes for each to get the effect.
document.querySelector("#top").classList.add("fade-out");
document.querySelector("#top").classList.remove("fade-in");
document.querySelector("#bottom").classList.add("fade-in");
document.querySelector("#bottom").classList.add("fade-out");
The images themselves can be preloaded.
So, i am trying to do an animation on my image in html/css. The problem is, it triggers when i load the page, but i want it to trigger when i scroll down to the image.
Here is my HTML part:
<figure>
<img src="Assets/Images/klenet.jpg" id="clenet_picture">
<figcaption id="clenet_text">Clenet Series 1 от 1979 година.</figcaption>
</figure>
Here is the CSS part:
#clenet_picture
{
. . .
animation-name: image-anim;
animation-duration: 4s;
}
#keyframes image-anim
{
from {opacity: 0%}
to {opacity: 100%}
}
I know i need to use some JS to make it work, but how exactly do i do that?
Add another class to it using JS. For example animate
Then you can use #clenet_picture.animate instead of #clenet_picture and animation will only start when you have applied new class
How to check if image is in viewport: How can I tell if a DOM element is visible in the current viewport?
I think i found a very simple solution.
However, there is one stupid problem.
Here is the code:
const checkpoint = 750;
window.addEventListener("scroll", () => {
const currentScroll = window.pageYOffset;
if (currentScroll <= checkpoint) {
opacity = 1 - currentScroll / checkpoint;
} else {
opacity = 0;
}
document.querySelector(".toAnimate").style.opacity = opacity;
});
The problem is that now it is doing the opposite... When i scroll to the picture, its opacity becomes 0 and when i scroll outside it, it becomes 1...
If someone has a solution, i will be thankful.
And thanks to all answers!
I fixed it!
Here is the working code:
//The checkpoint is set by you!
const checkpoint = 550;
window.addEventListener("scroll", () => {
const currentScroll = window.pageYOffset;
if (currentScroll <= checkpoint) {
opacity = 0 + currentScroll / checkpoint;
} else {
opacity = 1;
}
document.querySelector(".toAnimate").style.opacity = opacity;
});
This is the most simple solution, works without CSS!
I've used the following function in the past to fade items into view when they're on the user's screen. An example is one of my projects, here.
I found the original solution to this (with jQuery) here.
Here's the CSS code I used.
.card, .contact-div, .jumbotron-text, .jumbotron-button {
opacity: 0;
transform: translate(0, 20px);
transition: all 1.5s;
}
.visible {
opacity: 1;
transform: translate(0, 0);
}
Here's the jQuery I used.
$(document).on("scroll", function() {
//variable to see how far down the page scrolled
var $pageTop = $(document).scrollTop();
var $pageBottom = $pageTop + $(window).height();
//fade in classes set to variables
var $cards = $('.card');
var $contact = $('.contact-div');
//loop to see if card is in frame
for (let i = 0; i < $cards.length; i++) {
let card = $cards[i];
//if in frame, make card visible
if ($(card).position().top < $pageBottom) {
$(card).addClass("visible");
}
}
// if div is in frame, make div visible
if ($($contact).position().top < $pageBottom) {
$($contact).addClass("visible");
}
});
I am using Vue in my application this time and need the same effect but only using Vue or pure JS.
Can someone help me translate this to Vue (preferably) or vanilla JS (to avoid loading another framework, jQuery, into my application)?
I basically have some social media icons at the top of the page, that later become fixed.
I want them to fade in, I was using CSS. Everything I tried using JS did the same thing or didn't work.
Here is my JS:
jQuery(document).scroll(function() {
var y = jQuery(document).scrollTop(), //get page y value
social = jQuery(".socialnetworks"),
headerHeight = jQuery(".bg-cover").height();
if(y >= headerHeight + 500) {
social.css({opacity : 0});
social.addClass("fixedsocialnetworks");
} else {
social.removeClass("fixedsocialnetworks");
}
});
And my CSS
.fixedsocialnetworks {
position: fixed!important;
top: 200px!important;
z-index:10;
left:30px;
opacity:1!important;
transition: opacity 400ms;
}
So I set the opacity to 0, then add a class that sets the opacity to 1, and has the transition.
So it works, but it doesn't work the first time on scroll, it works every other time after the first. Why? How do I fix this?
I want to make an image begin scaled all the way down in x in, and then animate all the way up in x when classes are added (via javascript). The pattern that I am using works well for things like rotate, but I am thinking this is only because rotate goes a full 360 degrees. I am not sure why this does not work:
CSS:
.scaleXStart {
visibility: hidden;
z-index: 0;
transform:scaleX(.5);
}
.scaleXEnd {
z-index: 3;
transform: scaleX(2);
transition: transform 1s;
}
Javascript:
a = document.querySelector('#myDiv');
a.className = 'scaleXStart';
a.className = 'scaleXEnd';
I would think this would work because it is adding and then remove a class, so the scaleXproperty would be set to 0 and then 1 but this is not working. Thanks for any ideas on why
The problem is, it never gets a chance to get the start class and it goes straight to the end class. Putting the end class change into a timeout (even zero milliseconds!) will trick it into doing the both class changes:
function anim(){
a = document.querySelector('#myDiv');
a.className = 'scaleXStart';
setTimeout(function(){a.className = 'scaleXEnd';}, 0)
}
function anim2(){
a = document.querySelector('#myDiv');
a.className = 'scaleXStart';
a.className = 'scaleXEnd';
}
See what I mean here: http://jsfiddle.net/shomz/nzJ8j/