How to add an animation class to a div

How to add an animation class to a div - javascript

Hovering over the red box is adding a sweep to top blue color animation to the box but I would like to add this function by set-timeout function without hover. Why is this not working?
setTimeout(function() {
$('.hvr-sweep-to-top').addClass('add');
}, 8000);
.hvr-sweep-to-top {
height: 150px;
width: 150px;
background: red;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.add {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hvr-sweep-to-top">
</div>

The class which you are adding is just a hover class. You have to add the script at the bottom of the page, and add it under document.ready function. here the color will change to blue after two seconds:
$( document ).ready(function() {
setTimeout(function() {
$('.hvr-sweep-to-top').addClass('new');
}, 2000);
});
.hvr-sweep-to-top {
height: 150px;
width: 150px;
background: red;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.new:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
-webkit-transform: scaleY(0);
transform: scaleY(1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.add {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="hvr-sweep-to-top">
</body>
</html>

Try to add
var someTxt = setTimeout(function() {
$('.hvr-sweep-to-top').addClass('add');
}, 8000);
I'm not sure!

Related

How to divide in sections in four quadrants + make clicks in collapsable listbox independent of clicks in section

Description/Approach
I'm trying to merge the two pens:
https://codepen.io/ramsaylanier/pen/xcdiq?q=section&limit=all&type=type-pens
and
https://codepen.io/jasonpaul/pen/NxjvjW?q=collapse&order=popularity&depth=everything&show_forks=false
Ideally, I would like to make the four sections appear in a quadrant-like form (two sections in the first row and two sections in the bottom row). Each section should have a collapsable listbox. When the user clicks on the listbox the section shouldn't expand as well. Clicks in the listbox and in the section should be independent.
Regarding the clicks I think I have to tell the toggleClass to ignore clicks on .collapsible. Not sure how.
$('.section').on('click', function(){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").collapsible({accordion: false});
Code
https://codepen.io/szeconku/pen/oqBPvO
I need to figure out how to make clicks in the listbox independent of the clicks in the section and how to add a second row. Any help is appreciated.

Codepen updated : https://codepen.io/anon/pen/oqBrbq
$('.section').on('click', function(e){
$(this).toggleClass('expanded');
})
$(".collapsible").collapsible({accordion: true});
$(".collapsible").click(function(e){
e.stopPropagation();
});
.section {
background-size: cover;
position: absolute;
height: calc( 50% - 2px);
width: 50vw;
overflow: hidden;
/*#include skew(-10deg, 0deg);*/
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
border-left: 2px solid white;
border-right: 2px solid white;
cursor: pointer;
}
.section::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-color: #3498DB;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
.section::after {
content: "";
display: block;
position: absolute;
top: 0;
left: -15%;
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
width: 130%;
height: 100%;
opacity: 0.3;
z-index: -1;
-moz-transform: skew(10deg, 0deg);
-ms-transform: skew(10deg, 0deg);
-webkit-transform: skew(10deg, 0deg);
transform: skew(10deg, 0deg);
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
overflow: hidden;
}
.section:hover {
width: 47%;
z-index: 30;
}
.section:hover::after {
background-size: 50%;
}
.section:hover:last-of-type {
left: 53%;
}
.section.expanded {
width: 100% !important;
left: 0px;
height: 100%;
z-index: 100;
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
}
.section.expanded::after {
-moz-transform: skew(0deg, 0deg);
-ms-transform: skew(0deg, 0deg);
-webkit-transform: skew(0deg, 0deg);
transform: skew(0deg, 0deg);
background-size: 50%;
background-position: left;
}
.section.expanded:hover:last-of-type {
left: 0px;
}
.section.expanded:hover::after {
background-size: 50%;
background-position: left;
}
.section-1 {
left: 0;
top: 0;
}
.section-1::before {
background-color: #1DB45D;
}
.section-2 {
left: 50%;
top: 0;
}
.section-2::before {
background-color: #3498DB;
}
.section-3 {
left: 0;
bottom: 0;
}
.section-3::before {
background-color: #9B59B6;
}
.section-4 {
left: 50%;
bottom: 0;
}
.section-4::before {
background-color: #F06D3A;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<section class="section-1 section">
<h1>Title 1</h1>
<div class="container">
<ul class="collapsible" data-collapsible="expandable">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Bullet 1</div>
<div class="collapsible-body">
<p>Bullet 1 text</div>
</ul>
</div>
</section>
<section class="section-2 section">
<h1>Title 2</h1>
</section>
<section class="section-3 section">
<h1>Title 3</h1>
</section>
<section class="section-4 section">
<h1>Title 4</h1>
</section>
</div>

Smooth scrolling not working when it should?

So I've been designing a website for my new market garden company. The eCommerce backend is Lemonstand. I simply want to have the arrow button at the bottom of the main image scroll to the anchor (rather than jump). You can view the website here.
I found this code on this website in response to another question:
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("#scroll").click(function() {
scrollToAnchor('start');
});
The HTML is:
<div id="home-image-scrollbtn" class="mt-auto"><a id="scroll" href="#start">
<i class="fas fa-arrow-circle-down"></i></a></div>
<section class="container"><a name="start"></a>
I'm loading jquery 3.3.1 from Google's CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I've also tried numerous js scripts. All of them work in theory but don't seem to work on my site. What am I missing?

A small Demo , might help.
// Back to top
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$(".bck-top").addClass("show");
} else {
$(".bck-top").removeClass("show");
}
});
$(".bck-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, 800);
return false;
});
// Smooth Scroll
$(".nxt-pg").click(function(event){
$("html, body").animate({
scrollTop: $( this ).offset().top
}, 800);
event.preventDefault();
});
.for-height {
background: crimson;
height: 150vh;
}
.bck-top {
position: fixed;
right: -75px;
bottom: 35px;
background: #0e4d67;
width: 50px;
height: 50px;
border-radius: 50%;
opacity: 0;
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
transition: all .6s cubic-bezier(0.56, 0.07, 0.35, 1.99);
cursor: pointer;
z-index: 555;
}
.bck-top.show {
right: 35px;
border-radius: 0 50% 50% 50%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #797bed;
opacity: 1;
transition-property: right, transform, border-radius;
transition-duration: .6s, .6s, .5s;
transition-timing-function: cubic-bezier(0.56, 0.07, 0.35, 1.99);
transition-delay: 0s, 0s, .5s;
box-shadow: 2px 2px 6px 0px #303030;
}
.bck-top.show:hover {
border-radius: 50%;
transition: all .4s cubic-bezier(0, 2.84, 0, 1.19);
}
.nxt-pg {
position: absolute;
right: 0;
bottom: 20px;
left: 0;
width: 40px;
height: 29px;
margin: 0 auto;
cursor: pointer;
}
.nxt-pg span,.nxt-pg span:before, .nxt-pg span:after {
display: block;
width: 40px;
height: 4px;
border-radius: 35px;
background: #fff;
animation: fadeBottom .8s cubic-bezier(0.56, 0.07, 0.35, 1.99) alternate infinite;
}
.nxt-pg:active span,.nxt-pg:active span:before, .nxt-pg:active span:after {
animation-play-state: paused;
}
.nxt-pg span {
position: relative;
margin: 0 auto;
}
.nxt-pg span:before, .nxt-pg span:after {
content: '';
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
.nxt-pg span:before {
top: 12px;
width: 30px;
animation-delay: .15s;
}
.nxt-pg span:after {
top: 24px;
width: 20px;
animation-delay: .2s;
}
#-webkit-keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #009688;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes fadeBottom {
0% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
opacity: .5;
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
background: #787bed;
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="for-height">
<a class="nxt-pg">
<span class="br-top"></span>
Click Me
</a>
</div>
<button type="button" class="bck-top">up</button>

How do I automatically have Javascript-animations (with CSS) open in a certain order?

I'm trying to create an animated envelope on my site.
Right now, the code I'm trying to use only starts the next step of the animation on click.
My question would be how I get the animations to occur automatically after a certain amount of time.
This is how the code looks right now:
Javascript:
<script type="text/javascript">
// Wait for page to load
window.onload=function(){
$(document).ready(function () {
// Hide the div
$("#card").hide();
// Show the div after 5s
$("#card").delay(5000).fadeIn(100);
});
// Add Flip Envelope Event Handler
document.getElementById('envelope_front').onclick = function(){
document.getElementById('envelope_front').classList.toggle('flipped');
document.getElementById('envelope_back').classList.toggle('flipped');
}
// Add Open Envelope Event Handler
document.getElementById('flap_outside').onclick = function(){
document.getElementById('flap_outside').classList.toggle('open');
document.getElementById('flap_inside').classList.toggle('open');
// Add Remove Card Event Handler
// This is added after "Open Envelope" so that card can't be removed
// until the envelope has been opened
document.getElementById('envelope_back_outside').onclick = function(){
document.getElementById('card').classList.toggle('removed');
return false;
}
return false;
}
// Open Card
document.getElementById('card').onclick = function(){
document.getElementById('card_outside_front').classList.toggle('open');
document.getElementById('card_inside_top').classList.toggle('open');
return false;
}
}
</script>
CSS:
<style type="text/css">
body{
background-color: #fff;
color: #666;
font-family: Futura, Helvetica, Sans-serif;
text-align: center;
-webkit-perspective: 1000;
}
#envelope{
position: relative;
width: 600px;
height: 400px;
margin: 200px auto 0 auto;
}
#envelope_front{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
z-index: 1; /* This seems required for Chrome */
background: #FFF url('images/card-sprite.png') 0px 0px;
cursor: pointer;
-webkit-transition: all 4s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg) translateZ(10px);
}
#envelope_front.flipped{
-webkit-transform: rotateY(-180deg);
}
#envelope_back{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
background: #FFF url('images/card-sprite.png') -600px -400px;
-webkit-transition: all 4s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg) translateZ(3px);
}
#envelope_back.flipped{
-webkit-transform: rotateY(0deg);
}
#flap_outside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
background: transparent url('images/card-sprite.png') -600px -200px;
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(0) translateZ(3px);
}
#flap_outside.open{
-webkit-transform: rotateX(180deg) translateZ(0);
}
#flap_inside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
background: transparent url('images/card-sprite.png') -600px 0px;
-webkit-transition: all 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(-180deg) translateY(-200px) translateZ(3px);
}
#flap_inside.open{
-webkit-transform: rotateX(0deg) translateY(-200px) translateZ(0);
}
#envelope_back_outside{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
cursor: pointer;
background: transparent url('images/card-sprite.png') 0px -400px;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(2px);
}
#card{
position: absolute;
top: 10px;
left: 10px;
width: 580px;
height: 380px;
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(1px);
}
#card.removed{
-webkit-animation-name: remove-card;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#card_outside_front{
position: absolute;
width: 100%;
height: 100%;
background: #FFF url('images/card-sprite.png') -1800px 0px;
cursor: pointer;
-webkit-transition: all 1s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateX(0deg) translateZ(0px);
}
#card_outside_front.open{
-webkit-transform: rotateX(180deg);
}
#card_inside_top{
width: 100%;
height: 100%;
position: absolute;
background: #FFF url('images/card-sprite.png') -1210px -10px;
-webkit-transition: all 1s ease-in-out;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0 380px;
/* 379 is used instead of 380 to prevent any gap between the two layers (visible in Safari) */
-webkit-transform: translateZ(0px) translateY(-379px) rotateX(-180deg);
}
#card_inside_top.open{
-webkit-transform: translateZ(0px) translateY(-379px) rotateX(0deg);
}
#card_inside_bottom{
position: absolute;
width: 100%;
height: 100%;
z-index: -1; /* Hide behind #card_outside_front and #card_inside_top */
background: #FFF url('images/card-sprite.png') -1210px 390px;
}
/* Animation Keyframes for removing the card */
#-webkit-keyframes remove-card {
0% {
-webkit-transform: translateY(0px) translateZ(1px);
}
33% {
-webkit-transform: translateY(-400px) translateZ(1px);
}
67% {
-webkit-transform: translateY(-400px) translateZ(3px);
}
100% {
-webkit-transform: translateY(0px) translateZ(3px);
}
}
</style>`

You can use setTimeout with a given x delay time:
setTimeout(function() {
//put your animation code here
}, 2000);

To delay the animations in JS (and JQuery) you can use the delay function, you already are using it in some places. If you want the delay on the CSS you should apply the animation-delay property

You can use a timeout or you can use css animation-delay property without using too much javascript (I usually pick the second).

Disable animation effect with CSS

I am working on a slide-out menu for my website.
When the menu icon is clicked, I'd like to disable the way the menu animates upwards and just have it static. How do I do this?
http://jsfiddle.net/3w539Lct/
I believe the answer is in my CSS, but trial & error has failed so far:
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 1em;
height: 1em;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 300px;
height: 100%;
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
-webkit-transform: translate3d(-320px,0,0);
transform: translate3d(-320px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.menu,
.icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
margin-left: 10px;
font-weight: 700;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list,
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

remove these transitions:
.show-menu .icon-list a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);/*
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);*/
}
.show-menu .icon-list a { /*
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s; */
}

Since the menu items are referenced by the .icon-list class, just remove the relevant styles:
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
padding: 0.8em;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
You might want to keep the following style so that the menu position is not affected:
.icon-list a {
display: block;
padding: 0.8em;
}

Why are the CSS transforms not displayed?

I'm trying to make a navigation panel slide in on the click of a nav button in the main menu. Needless to say, it's not working. I've made this work before, so I'm not sure what's going on. Help?
HTML
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i class="account-control fa fa-user"></i>
</div>
<div class="wrapper">
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li>Billing</li>
<li>Support</li>
<li>Servers</li>
<li>Settings</li>
<li>Reports</li>
</ul>
</nav>
</div>
<!-- Copyright -->
<footer>
<form action="" class="search">
<input type="search" name="search" placeholder="Search">
</form>
<p class="copyright">asdf</p>
</footer>
</div>
</div>
Relevant CSS
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
top: 100px;
z-index: 0;
overflow: hidden;
}
#content {
position: relative;
left: 0;
z-index: 5;
height: 100%;
overflow: auto;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.sidebar-open #content {
-webkit-transform: translate(200px, 0);
-moz-transform: translate(200px, 0);
transform: translate(200px, 0);
}
/* Header */
.header {
background-color: #222222;
width: 100%;
height: 100px;
position: absolute;
top: 0;
z-index: 1;
}
#nav-button {
font-size: 24px;
color: white;
position: absolute;
left: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
#nav-button.open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.account-control {
font-size: 24px;
color: white;
position: absolute;
right: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Navigation */
#sidebar {
position: absolute;
top: 100px;
left: 0;
visibility: hidden;
width: 200px;
height: 100%;
background: #222222;
opacity: 1;
z-index: 1;
-webkit-transform: all 0.5s;
-moz-transform: all 0.5s;
transform: all 0.5s;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.sidebar-open #sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: transform;
-moz-transition-property: transform;
transition-property: transform;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
#sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.sidebar-open #sidebar:after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
-moz-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.nav-items {
max-height: 100%;
position: relative;
overflow: auto;
bottom: 60px;
}
.mainmenu ul {
margin: 0;
}
.mainmenu ul li a {
padding: 0 40px;
width: 100%;
line-height: 60px;
display: inline-block;
color: #202020;
text-decoration: none;
}
.mainmenu ul li a :hover, .mainmenu ul li a .active {
background: #e1e1e1;
}
JavaScript
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button, #content').click(function() {
$('#nav-button').toggleClass('open');
$('body').toggleClass('sidebar-open');
return false;
});
});(jQuery);
Yes, I am using FontAwesome. :)

Your biggest issue that solves your original question is due to overflow: hidden; on .wrapper.
Here it is removed: DEMO. But that opens up a whole new world of problems. I advise you to go back and refactor your code.

Have you tried to empty your cache?
Ctrl-Shift-Del so your browser will reload your css.
Note: If this happens to your users, try changing the link to your css in your header like this:
<link rel="stylesheet" href="css/main.css?v=2">

Develop Reference

JavaScript is the programming language of the Web.

How to add an animation class to a div - javascript

Try to add var someTxt = setTimeout(function() { $('.hvr-sweep-to-top').addClass('add'); }, 8000); I'm not sure!

Related

How to divide in sections in four quadrants + make clicks in collapsable listbox independent of clicks in section

Smooth scrolling not working when it should?

How do I automatically have Javascript-animations (with CSS) open in a certain order?

Disable animation effect with CSS

Why are the CSS transforms not displayed?

Categories

Resources