I have a tab and once I click it the tab fades in. The content gets loaded in with AJAX. After the animation is done I want to load in the content. Right now the content is loading in immediately when I click the button. I tried toggleClass with delay but it didn't work.
How can I delay the content from being loaded in?
This is the HTML :
$("#button-1").on("click", function() {
$(".hidden-content-1", 2000).toggleClass("show-hidden-content", 2000);
$(".main-page-content-1", 2000).toggleClass("hide-shown-content", 2000);
})
#modal-1 {
width: 33.33%;
height: 100vh;
background-color: green;
left: 0;
top: 0;
}
.modals {
transition-timing-function: ease-out;
transition-duration: 1000ms;
position: absolute;
}
.active {
width: 100vw !important;
height: 100vh !important;
}
.show-hidden-content {
display: block !important;
}
.hidden-content-1 {
display: none;
}
.hide-shown-content {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal-1" class="modals">
<div class="hidden-content-1">
<h1> TEST </h1>
</div>
<div class="main-page-content-1">
<h1>TEST </h1>
</div>
<a id="button-1" href="template-parts/panel1.php"><input onclick="change1()" type="button" value="See More" id="button-text-1"></input>
</a>
</div>
It seems you are looking something like:
$('#button-1').on('click', function () {
setTimeout(() => {
$('.hidden-content-1').toggleClass('show-hidden-content');
$('.main-page-content-1').toggleClass('hide-shown-content');
}, 2000);
});
You might want to use animation-delay
#target {
animation: fade-in 250ms ease-out 1s 1 normal both running;
}
#keyframes fade-in {
0% {
opacity:0;
} 100% {
opacity:1;
}
}
Related
I have two divs that appear like this:
The idea is that when you close the bottom div (click on the 'X'), it should disappear.
And when you close the top div, it should disappear, and also the bottom div should slide up and take its place.
I'm very new to jQuery, but this is my first attempt:
function initAnnouncements() {
$(document)
// Closes announcement modules
.on('click', 'annoucements-close', function () {
$('announcement-div').hide();
})
}
#keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
.1%{
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.announcements-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 1001;
display: flex;
flex-direction: column;
width: 300px;
/* align-items: flex-end; */
}
.announcements-1 {
animation: slideInFromRight 0.4s ease;
opacity: 0;
animation-fill-mode: forwards;
}
.announcements-2 {
/* animation: 0.4s ease-out 0s 1 slideInFromRight; */
animation: slideInFromRight 0.4s ease;
opacity: 0;
animation-fill-mode: forwards;
animation-delay: .4s;
margin-top: 15px;
}
.annoucements-header {
background-color: #1481C3;
color: #ffffff;
font-family: "Proxima Nova Bold";
padding: 7px 10px;
}
.annoucements-close {
position: absolute;
right: 5px;
width: 24px;
height: 36px;
cursor: pointer;
opacity: .85;
}
.annoucements-close:hover {
opacity: 1;
}
.annoucements-close::before,
.annoucements-close::after {
content: '';
width: 24px;
height: 2px;
background: white;
position: absolute;
top: 7px;
left: 0;
}
.annoucements-close::before {
transform: rotate(-45deg);
}
.annoucements-close::after {
transform: rotate(45deg);
}
/*opened or closed*/
.announcement-div-opened {
display: none;
}
.announcement-div.opened .announcement-div-opened {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="announcements-container">
<div class="announcement-div announcements-1">
<div class="annoucements-header">
<span class="annoucement-type-quantity">2 School Announcements</span>
<i class="annoucements-close"></i>
</div>
</div>
<div class="announcement-div announcements-2">
<div class="annoucements-header">
<span class="annoucement-type-quantity">1 Admin Announcement</span>
<i class="annoucements-close"></i>
</div>
</div>
</div>
</body>
As you can see this isn't doing anything. I'm trying to toggle the class from 'open' (display:block) to 'closed' (display:none) when the annoucements-close <i> element is clicked on.
And ideally I would like for the second div to slide up when the top one is closed, but first I'd just like to get either one to disappear.
What's wrong with my code where that's not working as expected?
Link to JSFiddle
There are 2 issues with your code: the click() event is inside the function initAnnouncements that doesn't get called. You could move it outside of this function or call the function. Then you have issues with your selectors: It's
.on('click', '.annoucements-close', function () {
$('.announcement-div').hide();
})
instead of
.on('click', 'annoucements-close', function () {
$('announcement-div').hide();
})
for class selectors. Working Fiddle.
If you just want to hide the annoucement which was clicked upon, just change it to
.on('click', '.annoucements-close', function () {
$(this).closest('.announcement-div').hide();
})
I looked at your code and adjusted it a little to demonstrate:
Added your common class on the two announcements "announcement-div"
Attached the document click handler with the jQuery ready event
Used the delegated event selector to listen to clicks within the document that match that common selector
On click of one of the announcement-div's animate the height to 0 and then remove the element
Comments are included in the fiddle. Hope this is helpful!
// Fire this function when the document is ready
$(function() {
// Listen on the whole document for click events on the .announcement-div element
$(document).on('click', '.annoucements-close', function () {
// From the close button find the closest parent "announcement-div"
var annoucement = $(this).closest('.announcement-div');
// Function to run after animating the element (use .hide() to keep element but display:none)
function destroy() {
annoucement.remove();
}
// Animate the annoucement's height to 0 over 400ms and then call the destroy function
annoucement.animate({ height: "0px" }, 400, destroy);
});
});
Updated JS Fiddle
I want to animate (fade-in) a div at or after the initial mounting of a component. After the animation is done, the div shouldn't disappear. I am trying to use CSSTransition component and looking examples on reactcommunity.org but I couldn't achieve any animation at all. I don't have any value that comes from somewhere for in, so I tried both trueand false but nothing changed.
CSS
.example-enter {
opacity: 0;
}
.example-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.example-exit {
opacity: 1;
}
.example-exit-active {
opacity: 0;
transition: opacity 300ms;
}
React
<CSSTransition classNames='example' in={false} timeout={200}>
<div
className='abc'
data-description="abc">
<div className='inner'>
<div className='head'>A</div>
<div className='explanation'>A</div>
</div>
</div>
</CSSTransition>
If you want to transition on the first mount set appear to true: Transition-prop-appear
You can try this:
<CSSTransition
in={true}
timeout={1000}
classNames="fade"
appear={true}
>
<div className="box" />
</CSSTransition>
Css:
.fade-appear {
opacity: 0;
transform: scale(0.2);
}
.fade-appear-active {
opacity: 1;
transform: scale(1);
transition: all 1000ms;
}
.box {
width: 50px;
height: 50px;
background: aqua;
}
See my code detail here: https://codesandbox.io/s/csstransition-component-okpue
Another easy way is to use CSS animations. no need to set extra class for your element.
Just use it in your desired element's CSS code :
Thanks to animate.css plugin for CSS, take a look at it:
https://daneden.github.io/animate.css/
the example:
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.elem {
padding: 40px 30px;
background: #aaa;
animation: fadeIn 2s;
}
<div class="elem">
Hello, this is a text
</div>
I have an animation where a div slides out the view, however when the animation is completed, the div just returns to its origin position in the view. How do I totally remove the div or hide it after the animation ends using just CSS?
Here is the markup:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
and the css:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-image: url(../pics/red.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: slide 5s linear 1;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
overflow: hidden;
visibility: hidden;
}
}
I don't want it to fade out over the duration of the animation, i just want it to disappear once it hits 100% in the keyframe. Thanks ahead of time!
Use the animation-fill-mode option. Set it to forwards and the animation ends at it's final state and stay like that.
Altered based upon comments Set opacity fade to just last 1% of animation... simplified keyframes. Added a jquery option to literally remove the div from the DOM. CSS alone won't alter the markup, where jQuery will.
Although you can't animate the display property. If you want the div totally gone, after the opacity fades to zero, you can then add the display property to remove the div. If you don't wait for opacity to end, the div will just vanish without any transition.
/*
This jquery is added to really remove
the div. But it'll essentially be
VISUALLY gone at the end of the
animation. You can not use, or
delete the jquery, and you really
won't see any difference unless
you inspect the DOM after the animation.
This function is bound to animation
and will fire when animation ends.
No need to "guess" at timeout settings.
This REMOVES the div opposed to merely
setting it's style to display: none;
*/
$('.slide-box').bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(e) { $(this).remove(); });
.slide-box {
display: block;
position: relative;
left: 0%;
opacity: 1;
width: 100px;
height: 100px;
background: #a00;
animation: slide 1s 1 linear forwards;
/*
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
*/
}
#keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
#-webkit-keyframes slide {
0% {
left: 0%;
opacity: 1;
}
99% {
left: 99%;
opacity: 1;
}
100% {
left: 100%;
opacity: 0;
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="slide-box" id="slide-box"></div>
</div>
animation: slide 5s linear forwards;
at 100%
opacity: 0;
display: none;
Try this.
Working fiddle: https://jsfiddle.net/jbtfdjyy/1/
UPDATE: JS mani
var slideBox = document.getElementById('slide-box');
setTimeout(function(){
slideBox.style.display = 'none';
}, 5000);
Try this. https://jsfiddle.net/jbtfdjyy/2/
Add something at 99% or so to your keyframes, and set opacity to 1 in that. If you have opacity: 1 at the start, then it will stay that way until 99%. Only at 100% will it change.
It's not technically fired at 100%. If you want that, I'd recommend using some JavaScript here, but this will at least give the illusion you want.
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
99% {
opacity: 1;
}
100% {
left: 100%;
overflow: hidden;
opacity: 0;
display: none;
visibility: hidden;
}
}
UPDATE:
As per your request, here is a JavaScript version. Keep in mind, there are endless ways to accomplish such a task. I am using vanilla JS (no jQuery, etc.), and using ES6 syntax.
What we do here is set a timeout, and at the end of that timeout I broadcast an event animation_end. That event listener will handle the end of the animation (in this case, it adds a class which will handle the fading out). This is much more granular than you need it to be, you could simply do the adding of the class within the setTimeout, but I think it is slightly better this way as you can abstract you can do other things with events such as animation start, etc.
Here is the fiddle: https://jsfiddle.net/vmyzyd6p/
HTML:
<div class="container">
<div class="slide-box" id="slide-box""></div>
</div>
CSS:
.slide-box {
position: relative;
width: 100px;
height: 100px;
background-color: blue;
animation: slide 3s linear 1;
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
.animationEnd {
opacity: 0;
}
#keyframes slide {
0% {
left: 0;
}
20% {
left: 20%;
}
40% {
left: 40%;
}
60% {
left: 60%;
}
80% {
left: 80%;
}
100% {
left: 100%;
}
}
JavaScript:
// Create a function that handles the `animation_end` event
const animationEnd = () => {
// Grab the slidebox element
let slideBox = document.getElementById('slide-box');
// Get the class of the slidebox element
let slideClass = slideBox.getAttribute('class');
// Add the animation end class appended to the previous class
slideBox.setAttribute('class', slideClass + ' animationEnd');
};
// Create the animation end event
let animationEndEvent = new Event('animation_end');
// Cross browser implementation of adding the event listener
if (document.addEventListener) {
document.addEventListener('animation_end', animationEnd, false);
} else {
document.attachEvent('animation_end', animationEnd);
}
// Set the timeout with the same duration as the animation.
setTimeout(() => {
// Broadcast the animation end event
document.dispatchEvent(animationEndEvent);
}, 3000);
I have a simple CSS animation on my site, where I want to show 5 divs showing one at a time in a row.
Everything works fine, but I want to make a trigger to that animation, when the user scrolls to that particular section on my site(now the animation starts when the page loads).
Here is my code:
<div id="space"></div>
<div id="container">
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-64.png" />
</div>
CSS:
#space {
height: 700px;
background-color: blue;
}
#container img {
opacity: 0;
}
#keyframes fdsseq {
100% { opacity: 1; }
}
#container img {
animation: fdsseq .5s forwards;
}
#container img:nth-child(1) {
animation-delay: .5s;
}
#container img:nth-child(2) {
animation-delay: 1s;
}
#container img:nth-child(3) {
animation-delay: 1.5s;
}
#container img:nth-child(4) {
animation-delay: 2s;
}
#container img:nth-child(5) {
animation-delay: 2.5s;
}
https://jsfiddle.net/Lwb088x5/
You need JavaScript to do this.
In the example(s) below, a scroll event listener to attached, and the animate class is added to the #container element if the img elements are visible:
Updated Example
#container.animate img {
animation: animation .5s forwards;
}
document.addEventListener('scroll', function (e) {
var top = window.pageYOffset + window.innerHeight,
isVisible = top > document.querySelector('#container > img').offsetTop;
if (isVisible) {
document.getElementById('container').classList.add('animate');
}
});
Alternatively, you could also use jQuery as well:
Updated Example
$(window).on('scroll', function (e) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('#container img').offset().top;
$('#container').toggleClass('animate', isVisible);
});
I'm using
jsfiddle.net/ts4dk6hp/
and wondering if I can
a) have the content open by default
b) have a smooth css transition to open (with no javascript)
HTML
<div id="show">
Open
<div id="content">
Close
<br>some text...
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: block;
}
#show:target #open {
display: none;
}
Any help would be great thanks!
First, I suggest you use javascript instead of just css. 2nd, I want to you to remember that css animations are only supported by newer browsers.
I have updated your jsfiddle, hopefully it will be helpful for you.
HTML
<div id="show">
Open
<div id="content">
<br>some text...
<br> Mur text, duh...
<br> Lorem
<br> Ipsum
<br> Watchama sayin'?
<br> Have fun!
</div>
CSS
#content {
transition: opacity 1s ease-in, height 500ms ease-out;
opacity: 0;
height: 200px;
width: 200px;
background: gray;
}
JS
var open = true;
$('#openclose').click(function() {
if (!open) {
open = true;
$(this).text('Close');
$('#content').css({
opacity: 1,
height: '200px',
overflow: 'hidden',
});
$('#content').one('transitionend', function() {
$(this).css('overflow', 'auto');
});
} else {
open = false;
$(this).text('Open');
$('#content').css({
opacity: 0,
height: '0px',
overflow: 'hidden',
});
$('#content').one('transitionend', function() {
$(this).css('overflow', 'auto');
});
}
});
http://jsfiddle.net/MashedPotatoes/ts4dk6hp/13/
To expand on humble.rumble.6x3's comment, you cannot do the first OR the second of your requirements without JavaScript. The main reason being that CSS is designed to style the content, not perform animations and interact with events (with exceptions).
Following way you can do using css:
1.) content open by default And smooth css transition to open (with no javascript).
#open {
display: none;
}
#show:target #content {
opacity: 0;
}
#show:target #close {
display: none;
}
#show:target #open {
display: block;
}
#content{
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#show{
display:table;
}
<div id="show">
<a href="#show" id="close" >Close</a>
<a href="#hide" id="open" >Open</a>
<div id="content">
<br>some text...
</div>
</div>
Hope it helps.