Activate a preloader only when a button was click in JavaScript - javascript

I have a button here And a code for preloader:
Now using JavaScript, I don't want this to load when the page loaded first. Instead I want to load this preloader when I click on the submit button for about 2-3 seconds. So on my Javascript:
submitBtn.addEventListener('ciick', () => {
window.addEventListener('load', function() {
document.querySelector('body').classList.add("loaded")
});
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
background-image: url('https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/1_avatar-512.png');
display: block;
position: relative;
top: 50%;
left: 50%;
width: 120px;
height: 119px;
margin: -75px 0 0 -75px;
border-top-color: white;
border-radius: 100%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<button type="submit" id="submit-btn">Submit</button>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
However, this one did not work. Instead, the loader loads forever and never stops when I load the page. How can I fix this issue and only attain the loading state when the button was click?

Related

Section Overlapping Transition Animation

I Have Section Overlapping Like This.
function forPageOne() {
document.getElementById('home').style.zIndex = 200;
document.getElementById('about').style.zIndex = -200;
}
function forPageTwo() {
document.getElementById('home').style.zIndex = -200;
document.getElementById('about').style.zIndex = 200;
}
<section
style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #144ddc;
left: 300px;
"
class="page1 home"
id="home"
></section>
<section
style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #dcc114;
left: 300px;
"
class="page2 about"
id="about"
></section>
<button onclick="forPageOne()">For Page One</button>
<button onclick="forPageTwo()">For Page Two</button>
If I Click One Button The Section Is Just Overlapping and I Do Not Need This Just Happen.I need to add the Animation part, one section into another section
And I have no idea how to do this.
If You Can Help with this my problem, I am so thankful About That.
Thank You..!
Example - https://animista.net/play/basic/flip-scale/flip-scale-up-ver
I need to add animation like this when my section is overlapping
You can add a class with the animations on click.
const page1 = document.getElementById('home');
const page2 = document.getElementById('about');
function forPageOne() {
page1.style.zIndex = 200;
page2.style.zIndex = -200;
page1.classList.add("animated");
page2.classList.remove("animated");
}
function forPageTwo() {
page1.style.zIndex = -200;
page2.style.zIndex = 200;
page1.classList.remove("animated");
page2.classList.add("animated");
}
#-webkit-keyframes flip-scale-up-ver {
0% {
-webkit-transform: scale(1) rotateY(0);
transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2.5) rotateY(90deg);
transform: scale(2.5) rotateY(90deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
transform: scale(1) rotateY(180deg);
}
}
#keyframes flip-scale-up-ver {
0% {
-webkit-transform: scale(1) rotateY(0);
transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2.5) rotateY(90deg);
transform: scale(2.5) rotateY(90deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
transform: scale(1) rotateY(180deg);
}
}
.animated {
-webkit-animation: flip-scale-up-ver 0.5s linear both;
animation: flip-scale-up-ver 0.5s linear both;
}
<section style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #144ddc;
left: 300px;
" class="page1 home" id="home"></section>
<section style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #dcc114;
left: 300px;
" class="page2 about" id="about"></section>
<button onclick="forPageOne()">For Page One</button>
<button onclick="forPageTwo()">For Page Two</button>

Second css animation is added but not causing effect

I have a menu button and a menu, there is 1 known bug:
Bug: One of the events is on mouseleave of the menu box and it should add a class dropDownMenuPulsate which is applied but does not work, I am forced to use !important in css animation declaration, why?
To reproduce this bug: click the menu button, place the mouse over the menu and then out(don't go back over), wait... in 2 seconds it applies animation if !important is used and 4 seconds later menu closes as expected.
var menuAutoHideTimeoutId = '';
var menuAutoWarningTimeoutId = '';
// dropdown menu button click
$("#dropDownMenuBtn").on("click", function(){
event.stopPropagation();
if($("#dropDownMenuWrap").css("opacity") == 0){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapHideAnimation').addClass('dropDownMenuWrapShowAnimation');
}else{
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
}
}
});
$(".dropDownMenuLinkWrap").on("click", function(){
console.log('page render');
// avoid menu hide to fire when click click outside menu wrap
event.stopPropagation();
})
// dropdown menu hide on click outside menu wrap
$(document).on("click", function(){
if($("#dropDownMenuBtn:hover").length == 0){
if($("#dropDownMenuWrap").css("opacity") == 1){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
}
}
});
$("#dropDownMenuWrap").on("mouseleave", function(){
// add class showing pulsating effect as warning of closing soon
menuAutoWarningTimeoutId = setTimeout(function(){
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").addClass('dropDownMenuPulsate');
}
}, 2000);
menuAutoHideTimeoutId = setTimeout(function(){
// add closing animation and remove others
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation dropDownMenuPulsate').addClass('dropDownMenuWrapHideAnimation');
}
}, 6000);
})
//mouse re enter cancel mouseout event
$("#dropDownMenuWrap").on("mouseenter", function(){
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
}
})
.dropDownMenuPulsate{
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
animation: pulsateAnimation .2s linear infinite !important;
}
#keyframes pulsateAnimation {
0% { transform: rotate(10deg); }
33% { transform: rotate(0deg); }
66% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
#dropDownMenuBtn {
cursor: pointer;
position: fixed;
top: 3px;
right: 20px;
font-size: xx-large;
color: #f997bb;
}
#dropDownMenuBtn:hover {
color: lightgrey;
}
.dropDownMenuWrapInitial{
position: fixed;
z-index: 99;
top: 60px;
background: white;
border: 1px solid lightgrey;
width: 200px;
padding: 10px;
border-radius: 5px;
pointer-events :none;
right:-300px;
opacity: 0;
}
.dropDownMenuWrapShowAnimation{
pointer-events :auto;
opacity:1;
right:10px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuShowAnimation;
-webkit-animation: .2s ease 1 linkMenuShowAnimation;
}
#-webkit-keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.dropDownMenuWrapHideAnimation{
pointer-events :none;
opacity:0;
right:-300px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuHideAnimation;
-webkit-animation: .2s ease 1 linkMenuHideAnimation;
}
#-webkit-keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
#keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropDownMenuBtn">
Menu button
</div>
<div id="dropDownMenuWrap" class="dropDownMenuWrapInitial">
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 1</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 2</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 3</p>
</div>
</div>
</div>
This happens because the element have three classes among which 2 of them contains animations. In such cases, the order from the css file will be followed. Since you put
dropDownMenuPulsate first and dropDownMenuWrapShowAnimation second in css file, the animation of dropDownMenuWrapShowAnimation will override the animation of dropDownMenuPulsate (you can see it in element inspector).
The fix
Move dropDownMenuPulsate block below dropDownMenuWrapShowAnimation block in css file, as you can see here.
var menuAutoHideTimeoutId = '';
var menuAutoWarningTimeoutId = '';
// dropdown menu button click
$("#dropDownMenuBtn").on("click", function(){
event.stopPropagation();
if($("#dropDownMenuWrap").css("opacity") == 0){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapHideAnimation').addClass('dropDownMenuWrapShowAnimation');
}else{
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
}
}
});
$(".dropDownMenuLinkWrap").on("click", function(){
console.log('page render');
// avoid menu hide to fire when click click outside menu wrap
event.stopPropagation();
})
// dropdown menu hide on click outside menu wrap
$(document).on("click", function(){
if($("#dropDownMenuBtn:hover").length == 0){
if($("#dropDownMenuWrap").css("opacity") == 1){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
}
}
});
$("#dropDownMenuWrap").on("mouseleave", function(){
// add class showing pulsating effect as warning of closing soon
menuAutoWarningTimeoutId = setTimeout(function(){
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").addClass('dropDownMenuPulsate');
}
}, 2000);
menuAutoHideTimeoutId = setTimeout(function(){
// add closing animation and remove others
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation dropDownMenuPulsate').addClass('dropDownMenuWrapHideAnimation');
}
}, 6000);
})
//mouse re enter cancel mouseout event
$("#dropDownMenuWrap").on("mouseenter", function(){
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
}
})
#keyframes pulsateAnimation {
0% { transform: rotate(10deg); }
33% { transform: rotate(0deg); }
66% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
#dropDownMenuBtn {
cursor: pointer;
position: fixed;
top: 3px;
right: 20px;
font-size: xx-large;
color: #f997bb;
}
#dropDownMenuBtn:hover {
color: lightgrey;
}
.dropDownMenuWrapInitial{
position: fixed;
z-index: 99;
top: 60px;
background: white;
border: 1px solid lightgrey;
width: 200px;
padding: 10px;
border-radius: 5px;
pointer-events :none;
right:-300px;
opacity: 0;
}
.dropDownMenuWrapShowAnimation{
pointer-events :auto;
opacity:1;
right:10px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuShowAnimation;
-webkit-animation: .2s ease 1 linkMenuShowAnimation;
}
.dropDownMenuPulsate{
/*ANIMATION Works without !important
¯\_(ツ)_/¯
*/
animation: pulsateAnimation .2s linear infinite;
}
#-webkit-keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.dropDownMenuWrapHideAnimation{
pointer-events :none;
opacity:0;
right:-300px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuHideAnimation;
-webkit-animation: .2s ease 1 linkMenuHideAnimation;
}
#-webkit-keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
#keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropDownMenuBtn">
Menu button
</div>
<div id="dropDownMenuWrap" class="dropDownMenuWrapInitial">
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 1</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 2</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 3</p>
</div>
</div>
</div>
Reference
Just a personal opinion, are you sure you want to show such an animation in a page?
When .dropDownMenuPulsate is added to #dropDownMenuWrap, that element already has .dropDownMenuWrapShowAnimation.
Both classes have an "animation" property, and since .dropDownMenuPulsate is declared first, .dropDownMenuWrapShowAnimation is overriding it.
You could move .dropDownMenuPulsate declaration to the bottom, or make it more specific:
.dropDownMenuWrapShowAnimation.dropDownMenuPulsate {
...
}

How to make preload animation disappear in 3s in Javascript

I have this preload animation that I want to incorporate into my website. All I want to do is play the animation for 3 seconds upon the page loading and then make it fade out. I've already successfully made it fade out by assigning transition property to CSS. All I need is the piece of code that delays it for 3s. I know it's something to do with the setTimeout() method but I think I'm not using it right.
This is what I've got so far:
<div class="spinner-wrapper" id="fds">
<div class="spinner"></div>
</div>
<script>
var preloader = document.getElementById("fds");
function fadeOut() {
preloader.style.opacity = "0.0";
setTimeout(fadeOut(), 5000);
}
</script>
I know the CSS is somewhat irrelevant but anyway, here it is:
.spinner-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ff6347;
z-index: 999999;
transition: 2s;
}
.spinner {
width: 40px;
height: 40px;
background-color: #333;
position: absolute;
top: 48%;
left: 48%;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
All I need is the piece of code that delays it for 3s
Set animation-delay to 3s at CSS

Text rendering changing un-expectedly

I've got an issue which I'm struggling to isolate whereby some of my text changes it appearance, looking slightly more bold than other times. This is in sync with a "pulsing" effect I've introduced, but I'm struggling to see why.
Here's an example of the affect. Things to look for in this animated GIF:
Name: Notice the exclamation mark that appears with a grey pulse over it
Server Item/Item Type/File Extension: Watch carefully and you'll see the text get bolder
Note that the other changes (the larger exclamation and the Item Type data changing and irrelevant, I've since commented out and still see the affect).
EDIT I've managed to get a reproduction and updated the snippet to this affect.
I should note that I've only seen this in Chrome. Firefox seems fine, IE unfortunately doesn't yet work with the codebase so I can't test until I get a reproduction working.
What the code below does is to simply toggle an animate class on a new <span class="pulse"> that has been added. This should trigger the CSS animation to kick in again, which changes the size of the grey pulse.
// Sets up a pulsing affect on any invalid icons within the Deck
(function () {
setInterval(function () {
// Check for any invalid classes, if none were found then just return
var cardErrors = $(".card.invalid");
if (cardErrors.length === 0) return;
function pulse(selection, size, position) {
var missingPulses = selection.filter(function (index, element) {
return $(element).find(".pulse").length === 0;
});
missingPulses.prepend("<div class='pulse'></div>");
// Find the pulse and remove the animation class
var pulse = selection.find(".pulse");
pulse.removeClass("animate");
// Define the pulse size if it's not done already
if (!pulse.filter(function (index, element) {
return !pulse.height() && !pulse.width();
}).length !== 0) {
pulse.css(size);
pulse.css(position);
}
//set the position and add class .animate
//pulse.css(position)
pulse.addClass("animate");
}
pulse(cardErrors, {
height: 12,
width: 12
}, {
top: 11 + 'px',
left: 316 + 'px'
});
}, 2500);
})();
.pulse {
display: block;
position: absolute;
background: #555;
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.pulse.animate {
-moz-animation: pulse-ripple 0.65s linear;
-o-animation: pulse-ripple 0.65s linear;
-webkit-animation: pulse-ripple 0.65s linear;
animation: pulse-ripple 0.65s linear;
}
#keyframes pulse-ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
/* Mixins */
/* Comment here */
html {
height: 100%;
}
body {
height: 100%;
}
body {
scrollbar-base-color: #999;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar {
width: 10px;
height: 30px;
}
::-webkit-scrollbar-button {
height: 0px;
}
::-webkit-scrollbar-track-piece {
background-color: #EBEBEB;
}
::-webkit-scrollbar-thumb {
height: 20px;
background-color: #999;
border-radius: 5px;
}
::-webkit-scrollbar-corner {
background-color: #999;
}
::-webkit-resizer {
background-color: #999;
}
.deck {
background: rgba(250, 250, 251, 0.88);
position: absolute;
top: 0;
right: 0;
width: 345px;
padding: 10px 10px 10px 10px;
opacity: 1;
height: 100%;
z-index: 10;
}
.deck .scrollable {
overflow-y: scroll;
width: 338px;
height: 100%;
padding-right: 7px;
}
.deck .non-scrollable {
width: 338px;
overflow: hidden;
}
.deck .non-scrollable .card {
width: 338px !important;
}
.deck .card {
margin-bottom: 11px;
background: #FFFFFF;
float: right;
clear: both;
font-family:'Open Sans', Arial, sans-serif;
width: 318px;
padding: 10px 12px 10px 12px;
-moz-transition: box-shadow 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
box-shadow: 0px 1px 5px 1px rgba(198, 198, 198, 0.75);
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* remove padding added by bootstrap, but only within cards */
}
.deck .card[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.deck .card.summary-card {
cursor: pointer;
/* https://github.com/ConnorAtherton/loaders.css MIT */
}
.deck .card.summary-card:hover {
box-shadow: 10px 10px 50px 0px #c6c6c6;
}
.deck .card.summary-card .title {
color: #33BDDE;
font-size: 14px;
font-weight: normal;
display: block;
padding-bottom: 5px;
padding-left: 10px;
}
.deck .card.summary-card .notification {
top: 5px;
right: 5px;
width: 20px;
height: 20px;
position: absolute;
}
.deck .card.summary-card.busy .notification {
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
border: 3px solid #33BDDE;
border-bottom-color: transparent;
height: 15px;
width: 15px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1.25s 0s linear infinite;
-moz-animation: rotate 1.25s 0s linear infinite;
-o-animation: rotate 1.25s 0s linear infinite;
animation: rotate 1.25s 0s linear infinite;
}
.deck .card.summary-card.filtered .notification:before {
position: relative;
font-family: FontAwesome;
top: 0px;
left: 0px;
color: #33BDDE;
font-size: 18px;
content:"\f0b0";
}
.deck .card.summary-card .content {
padding: 0 0 0 0;
}
.deck .card.summary-card .content .label {
color: #303E45;
font-size: 12px;
font-weight: normal;
float: left;
}
.deck .card.summary-card .content .value {
color: #8BC34A;
font-size: 12px;
font-weight: normal;
float: right;
}
.deck .card.summary-card .content .ellipsis {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#keyframes rotate {
0% {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
/* ripple effect from http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design */
/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
display: block;
position: absolute;
background: rgba(198, 198, 198, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
/* animation effect */
.ink.animate {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
#-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-moz-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* end of cards menu */
/* tooltips */
.dxc-tooltip {
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="deck">
<div class="scrollable">
<div>
<div class="card summary-card string-card aggregate-card clickable filtered invalid" id="FI.NAM">
<div class="notification"></div> <span class="title" data-bind="text: name">Name</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.SER">
<div class="notification"></div> <span class="title" data-bind="text: name">Server Item</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.FIL">
<div class="notification"></div> <span class="title" data-bind="text: name">File Extension</span>
</div>
</div>
</div>
</div>

Rotate back div after the second click on it

I used CSS and Javascript in order to rotate a div after a click on it (from 0deg to 45deg). It's working good. I want the div to rotate back after a second click on it (from 45deg to 0deg), but nothing happens on the div... I didn't find more topics to fix this problem.
If you have any idea, it would be great ! Thanks.
Style
.home {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.home.active {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
Script
$(document).ready(function(){
$('.home').click(function(){
$('.home').removeClass('active');
$(this).addClass('active');
});
});
Try using toggleClass
$(document).ready(function(){
$('.home').click(function(){
$(this).toggleClass('active');
});
});
CSS3 can accomplish the transformation, See Firefox MDN Link for more info
HTML
<div class="description-wrapper">
<div class="category-desc-toggle rotate redbg"></div>
<div class="category-desc">REEED!</div>
</div>
<div class="description-wrapper">
<div class="category-desc-toggle bluebg rotate"></div>
<div class="category-desc">Blue</div>
</div>
<div class="description-wrapper">
<div class="category-desc-toggle yellowbg rotate"></div>
<div class="category-desc">Yellow Box</div>
</div>
Javascript
$(".description-wrapper").click(function() {
$(this).children('div.category-desc').slideToggle(300);
$(this).children('div.category-desc-toggle').toggleClass("rotate45");
});
CSS
.description-wrapper {
width: 80px;
text-align: center;
margin-bottom: 20px;
}
.redbg {
background-color: red;
}
.bluebg {
background-color: blue;
}
.yellowbg {
background-color: yellow;
}
.rotate {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.category-desc-toggle {
width: 80px;
height: 75px;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
Working Demo

Categories