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 {
...
}
Related
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?
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>
I want to use one class to trigger an animation, and upon removal of that class redo that animation in reverse.
It's hard to visualize, so I've created a CodePen of where I'm at currently.
You'll notice that when .zoom is removed from #box, the #box just vanishes. It doesn't do the animation in reverse, which is ultimately the goal.
How can I seamlessly transition back and forth, with only one animation class? Normally I might use transitions, but you can't transition with transforms.
Try adding .zoomout class , css animations , utilizing .removeClass() , second class at .toggleClass()
window.onclick = function() {
if (!$("#box").is(".zoom")) {
$("#box").removeClass("zoomout")
.toggleClass("zoom");
} else {
$("#box").toggleClass("zoom zoomout");
}
};
#box {
width: 256px;
height: 256px;
background: black;
opacity: 0;
display: block;
transform: scale(1.15, 1.15);
margin: 16px 0px;
}
.zoom {
animation: zoom 500ms;
animation-fill-mode: both;
-moz-animation: zoom 500ms;
-moz-animation-fill-mode: both;
-webkit-animation: zoom 500ms;
-webkit-animation-fill-mode: both;
}
.zoomout {
animation: zoomout 500ms;
animation-fill-mode: both;
-moz-animation: zoomout 500ms;
-moz-animation-fill-mode: both;
-webkit-animation: zoomout 500ms;
-webkit-animation-fill-mode: both;
}
#keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#-moz-keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#-webkit-keyframes zoom {
0% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#-moz-keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
#-webkit-keyframes zoomout {
0% {
opacity: 1;
transform: scale(1.15);
}
100% {
opacity: 0;
transform: scale(1);
}
}
body {
margin: 0;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
-moz-transform: translate(-50%, -60%);
-webkit-transform: translate(-50%, -60%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="box"></div>
Click the document to toggle the box.
codepen http://codepen.io/anon/pen/vOxxKE
I'm trying to create an animation using CSS that will pop up and rotate when the page is loaded. The issue I'm having with is, I need the element to be rotated BEFORE the animation begins.
JSFiddle: http://jsfiddle.net/4o1w01q5/
I can't tell if the issue is with this CSS snippet:
.container {
background:red;
background-image: url(img/2012-04-12_14-06-35_758-1.jpg);
background-position: center;
background-repeat: no-repeat;
padding:240px;
padding-left: 300px;
padding-right: 300px;
padding-top:10px;
-webkit-animation: logo-appear 0.6s, logo-rotate 1.6s;
-moz-animation: logo-appear 0.6s, logo-rotate 1.6s;
animation: logo-appear 0.6s, logo-rotate 1.6s;
}
Or if there is a way to set the rotated positiong with jQuery. Any suggestions?
Edit: To clarify, what I'm trying to do is
Have a div load, rotated 45 degrees
Pop the div (logo-appear)
Rotate the div 45 degrees down (logo-rotate)
Why do I want it like this? I want a diamond-shaped element load and the rotate it to make it a square.
Figured it out. It was a matter of having the rotate happen along with the popping up sequence.
JSFiddle: http://jsfiddle.net/s8hae5dz/ with additional animation
Previous example:
#-webkit-keyframes logo-appear{
0% {
opacity: 0;
-webkit-transform: scale(0.5);
}
20% {
opacity: 1;
-webkit-transform: scale(1.2);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
Currently:
#-webkit-keyframes logo-appear{
0% {
opacity: 0;
-webkit-transform: scale(0.5) rotate(-45deg);
}
20% {
opacity: 1;
-webkit-transform: scale(1.2) rotate(-45deg);
}
60% {
opacity: 1;
-webkit-transform: scale(1.2) rotate(-45deg);
}
100% {
-webkit-transform: scale(1) rotate(-45deg);
}
}
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