CSS Flip Animation reset on every click - javascript

I am using David Walsh css flip effect: http://davidwalsh.name/css-flip
I have this working onClick with a JavaScript function called showCard(). See the codePen here:
https://codepen.io/Chris_Nielsen/pen/YaWmMe
When you first click the button, it animates correctly (opens from left to right). However, when you click the button again, it closes animates from right to left. The third time the button is clicked it opens again animates correctly (from left to right) again.
What I want to do is get this to re-open from left to right every time.
Can someone point out how I can make this work? I have worked on this for 2 hours and am stumped.
The Code:
function showCard() {
document.querySelector("#errorMessage").classList.toggle("flip");
}
body {
background: #575955;
color: white;
}
.error-box {
width: 380px;
height: 110px;
background: #fff;
border: solid 1px #B71C1C;
border-radius: 9px;
font-family: 'Raleway', sans-serif;
font-size: 1.6rem;
color: #B71C1C;
text-align: center;
padding: 30px;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container.flip .flipper {
visibility: visible;
transform: rotateY(90deg);
/* transform: rotateY(90deg); */
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: .35s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(-90deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<h1>Click the button below to see the <br>animated alert.</h1>
<div class="flip-container" id="errorMessage" >
<div class="flipper">
<!-- text here will rotate -->
<div class="front">
<!-- front content -->
<br><br><br>
<div class="error-box">
Email address or password <br>
Incorrect. <br>
Please Try Again.
</div>
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
<input type="button" value="Show card" onClick="showCard();">

I think it will help to explain a little bit of what is going on here in the code you have now. In short, you've created an action based on a CSS class that fires on a click. The important part to note here is that this action is based on the addition of a class.
visually...your html looks something like this (using alternate elements here for simplification).
<element class="class1">some text</element>
then when you click the button, this changes the HTML markup to look something like this...
<element class="class1 class2">some text</element>
which in turn, hits your css sheet which now fires off the action that you want...in your case...flipping the card.
So the reason why your card is flipping the direction you want on first click, and then flipping back the opposite direction on your second click, is because you are simply adding a class that says, "turn me 90 degrees", and then on the 2nd click, removing that same class which tells your CSS to basically "undo" that move.
I'm not sure what the best approach will be if you want to continue to use what David Walsh wrote, plug and play, because it wasn't really designed to do what you're looking for. One approach may be to add a second class that completes another 90degree rotation on click 2, and then hide the element while you remove the two classes that undo your rotations.
Update 1 - Created a working version here off of your codepen here... https://codepen.io/SEAjamieD/pen/bvggOw?editors=0110
Probably not ideal to add and remove classes so quickly like that but it works. You might think about moving the animations into a keyframe. Hope this helps!

Okay, I finally got this working so that every time the button is clicked the card opens from right to left. It took a combination of #Jamie D's idea above about removing and re-adding classes with the idea of using a jQuery function with a timer that automatically reclicks the button.
Solution can be seen on codepen here:
https://codepen.io/Chris_Nielsen/pen/LdWPPG
Here is the solution code.
var card = document.querySelector("#errorMessage");
var container = document.querySelector('.flip-container');
var isOpen = false;
function showCard() {
if (!isOpen) {
container.style.visibility = "visible";
card.classList.add("flip");
document.querySelector(".flipper").classList.toggle("flip");
isOpen = true;
} else if (isOpen) {
card.classList.toggle("flip");
isOpen = false;
clickAgain();
}
}
function clickAgain(){
setTimeout(function() {
$(document).ready(function(){
$("#b1").click()
});
}, 350);
}
body {
background: #575955;
color: white;
}
.error-box {
width: 380px;
height: 110px;
background: #fff;
border: solid 1px #B71C1C;
border-radius: 9px;
font-family: 'Raleway', sans-serif;
font-size: 1.6rem;
color: #B71C1C;
text-align: center;
padding: 30px;
}
/* Hide the flip container to start */
.flip-container {
perspective: 1000px;
visibility: hidden;
}
.flip-container.flip .flipper {
transform: rotateY(90deg);
transition: 0.35s;
}
.flip-container, .front, .back {
width: 320px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(-90deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(90deg);
/* transform: rotateY(180deg); */
}
<h1>Click the button below to see the <br>animated alert.</h1>
<div class="flip-container" id="errorMessage" >
<div class="flipper">
<!-- text here will rotate -->
<div class="front">
<!-- front content -->
<div class="error-box">
Email address or password <br>
Incorrect. <br>
Please Try Again.
</div>
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
<input type="button" id="b1" value="Show card" onClick="showCard();">

Related

display a modal from right to left and content inside another div

I would like to make my modal contained in the container (the red area).
When I set position to relative, the modal opens from left to right whereas I want it to open from right to left
And the modal goes after the button when I want it to go over everything in the red area.
#container{ background-color:red; width: 100%; height: 300px }
.modal {
display: block;
position: absolute;
z-index: 99;
right: 0; top: 0;
width: 100%; height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
animation: slide-in 1s linear 1;
}
#keyframes slide-in { 0% { width: 0; } 25% { width: 25%; } 50% { width: 50%; } 75% { width: 75%; } 100% { width: 100%; }
}
.modal-content { background-color: #fefefe; margin: 20px; padding: 20px; border: 1px solid #888;
}
<div id=container>
<button id="open-modal-btn">Open modal</button>
</br>
<div id="my-modal" class="modal">
<div class="modal-content">
<h2>title</h2>
<p>content</p>
</div>
</div>
</div>
UPDATE: Sorry I mis-read your original post. In any case, the technique below is still preferred; just swap values.
To get a from-left slide with your current code as it exists, change right to left in your modal class.
.modal {
/* Change right to left */
/* right: 0; */
left: 0;
}
However your slide-in technique is awkward. You're achieving a slide by growing the width of the modal, so semantically this is a "grow-in". You're lucky that your content is not warping, and that it happens to appear as a "slide-in". A more elegant way to actually slide-in would be to use transform: translate(0,0) on the modal.
Instead I'd do this, roughly:
Codepen link
.modal {
/* ... */
/* Gives motion to changed properties like transform */
transition: all 0.5s ease;
/* Default off-screen left */
transform: translate(-100%,0);
/* Default off-screen right */
/* transform: translate(100%,0); */
}
.modalOpened .modal {
/* Set back to zero (center of viewport) */
transform: translate(0,0);
}
In addition, in your modal open event (the button click) simply toggle a class modalOpened on the app container. No keyframes needed. Just a natural, and actual, slide-in.

Transition is jerky when the element is slide up and down on mobile devices?

I've created a modal that slides up and down on click using CSS and jQuery.
When viewed on the desktop, it looks "OK" ish but when viewed on mobile devices, its jerky. Especially when the modal goes down.
What I am tryingt o achieve is a very smooth slide up and down. I did come across quite a few similar questions but I don't see any difference between what I am doing and what was suggested to other people to fix this issue.
The main purpose of this modal is to be used in a hybrid mobile app in phonegap. And this modal should look similar to YouTube player on iPhones.... So if you open YouTube on your mobile device, and play a video, on the top left, you will see an arrow that's pointing down. If you click/tap on that, you will see that YouTube player will get minimise. That is the sort of animation that I am trying to achieve.
This is what I have so far:
https://jsfiddle.net/zshk3nex/1/
$(document).on('click', '.tol', function() {
if ($('.hid-box').hasClass("easout")) {
$('.hid-box').removeClass("easout");
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
} else {
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
}
});
$(document).on('click', '.minifyBtn', function() {
if ($('.hid-box').hasClass("easin")) {
$('.hid-box').removeClass("easin");
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
} else {
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
}
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
}
.easin {
transition: all 0.2s ease-in;
}
.easout {
transition: all 0.6s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
Could someone please advice on this issue?
Absolute properties such at top and bottom aren't great for animations. Instead you could use transform. transform performs far better in animations and transitions.
When using percentages in transform the percentage is based on the elements box, rather than the parent, like with almost all other css values.
Another thing that could help improve performs is to narrow down your transition property. In your case you have selected to transition all properties. You could set it to only transition the properties you need. In this case that would be transition: transform 0.2s ease-in. While this won't necessarily.
Let's clean up your code a little bit.
$(document).on('click', '.tol', function() {
$('.hid-box').toggleClass("active")
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
transition: transform 200ms;
}
.hid-box.active {
transform: translateY(-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
I've removed the vast majority of the jQuery you used, only toggling a single class now. I've moved the transition to the main element. I've also added a active class which simply sets the transform property to translateY(-100%). This means it will move it -100% of the elements height.
All of this should make it perform better on mobile. However at the end of the day it will also depend on the strength of your device. If it is somewhat older it might not perform as well.
I hope that helps!

How does photoswipe apply styles to blur image when you click on share button?

You can see example here: http://codepen.io/dimsemenov/pen/gbadPv
Click on Share button and you'll see it blurs the image (and everything else).
I am observing this in inspector and I can't figure it out.
I have downloaded source code and it set a watch in photoswipe-ui-defaults.js in this last line:
_openWindowPopup = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
pswp.shout('shareLinkClick', e, target);
It never gets executed.
I have added other similar modal and I want to achieve same effect, but I can't figure out what is being done to achieve that blur.
Well, it would looks partly complicated that's why it isn't clear for the first look.
There all time rendered .pswp_share-modal with this css
Share Modal:
.pswp_share-modal {
display: block;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
position: absolute;
z-index: 1600;
opacity: 0;
-webkit-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
-webkit-backface-visibility: hidden;
will-change: opacity;
}
When you click to the "share" button somewhere in js .pswp__share-modal--fade-in class attaches to the same element with this css:
Modal with fade in effect:
.pswp__share-modal--fade-in {
opacity: 1
}
As you can see the general idea is to turn opacity to 100% when share modal is active. Blur effect is exist cause actual modal background has rgba(0,0,0,0.5);
What you have to do is add an extra div, make it full screen, and then add a background to the div. I have an example here (it looks ugly but you'll catch what I'm trying to say).
$(document).ready(function() {
$('#modal-btn').click(function(){
$('.modal').css("display","block");
});
$('.modal').click(function(){
$(this).css("display","none");
});
});
html, body {
background-color: #000;
color: #fff;
height: 100%;
width: 100%;
z-index: 1;
}
.modal {
background-color: #000;
background-color: rgba(0, 0, 0, 0.5);
display: none;
height: 100vh;
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 2;
}
.modal-content {
background-color: #aaa;
height: 50%;
margin: 10px auto;
text-align: center;
width: 50%;
z-index: 3;
}
<html>
<head></head>
<body>
<!-- Page content -->
<div>
The content that goes in the background.
<button id="modal-btn" class="btn">Open Modal</button>
</div>
<!-- Modal -->
<div class="modal">
<div class="modal-content">The Modal Content</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>

How to create popups in css /Javascript?

I am trying to make popups containing list of lines:
Support
Contact
Demo
In the 1st line, it should display Support. In the 2nd line, it should display Contact and in the 3rd line, it should display Demo.
I was able to create popups containing one line by following the w3schools link http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup but I am not sure how to create popups having multiple lines.
The pictorial representation of what I am trying to get is shown here:
The code which I have used from the w3schools link is shown below:
<!DOCTYPE html> <html> <style> /* Popup container - can be anything you want */ .popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
/* The actual popup */ .popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px; }
/* Popup arrow */ .popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent; }
/* Toggle this class - hide and show the popup */ .popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s; }
/* Add animation (fade in the popup) */ #-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;} }
#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;} } </style> <body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">Support</span> </div>
<script> // When the user clicks on div, open the popup function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show'); } </script>
</body> </html>
In place of A Simple Popup, I have written Support. At this moment, I am able to get only one line as shown here:
As a quick try do these steps to design what you want
1- open you mentioned link
2- change the html code to :
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<div class="popuptext" id="div">
<div><span id="myPopup">Support</span><br/></div>
<div><span id="myPopup1">Contact</span><br/></div>
<div><span id="myPopup2">Demo</span><br/></div>
</div>
</div>
3- change myFunction() code block to :
var popup = document.getElementById('div');
popup.classList.toggle('show');
4- Add this css class to style element in head
.popup .popuptext div{
text-align: center;
background:#ad4747;
border-radius: 6px;
width: 160px;
margin-top:2px;
}
5- At the end run and see the result
but as you know there are several ways to design popup menu by front-end tools ,
but my solution is a quick design hope give you some help.
Additional helpful link

Javascript Side Content keep appearing after Toggle the Style

I'm trying to create a Side menu for my responsive website. I'm not that good with JavaScript but it is working! (so far)
My problem is that, I'm toggling the <nav> class to make it appear and dissapear from the left side. The button to click is outside the <nav> content and the button to close is a simple text inside the <nav> content.
So, my HTML looks like this:
<nav id="nav-slide" class="nav-slide">
Side Content <br>
Close
</nav>
That's the nav that I'm trying to Toggle. The button to open should be this image:
<img id="menu-icon" src="images/menu-icon.svg"/>
CSS:
.nav-slide {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background-color: #3f3f3f;
z-index: 99;
box-sizing: border-box;
padding: 20px;
color:#fff;
margin-left: -100%;
transition: margin 200ms ease-in-out;
}
.nav-open {
margin-left: 0px;
transition: margin 200ms ease-in-out;
}
and my JAVASCRIPT:
$("#menu-icon").click(function(){
$("#nav-slide").toggleClass("nav-open");
});
$("#close-button").click(function(){
$("#nav-slide").toggleClass("nav-slide");
});
Is working so far! But when I click on Close text, and after closing the <nav> it keeps displaying <nav> content like this image:
Image with example of problem
Any way to solve this?
JQuerys toggleClass does add a new class to an item. If it already has that class, it will remove it from that item. So while your nav's base class is nav-slide, toggle nav-open only (not both). Here's a slightly different, basic example of an animated side-nav:
$('button').on('click', function (e) {
$('.menu').toggleClass('open');
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 20%;
background-color: tomato;
transform: translate(-100%, 0);
transition: transform 1s;
}
.menu.open {
transform: translate(0, 0);
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<button>menu</button>
<div class="menu">
<button>close</button>
</div>
Edit: Here is a pen of your example:
http://codepen.io/wilmaknattern/pen/xZXMaW

Categories

Resources