I'm trying to flip multiple div elements at different times in Reactjs by toggling the classes assigned to them.
It works as expected in Opera, Firefox, and Chrome, but not Safari. In Safari, when a single element is flipping, all the other flipped elements disappear. The other non-flipped elements are unaffected though. I'm wondering if this is fixable in Safari so it behaves like the other browsers?
Here's a jsfiddle that will work in all browsers but Safari.
Here's the relevant jsx. 'flipped' is an object with multiple booleans to keep track of which items are flipped and which are not.
<div className="item">
<div className={"bg-card" + (flipped[i] ? ' bg-card-flipped' : '')}>
<div className="bg-image bg-image-front">Front {i}</div>
<div className="bg-image bg-image-back">Back {i}</div>
</div>
</div>
Here's the relevant css:
.item {
position: relative;
background-color: black;
width: 100px;
height: 100px;
margin-right: 20px;
}
.bg-card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 0.5s ease;
}
.bg-card-flipped {
transform: rotateY(180deg);
}
.bg-image {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
border-style: solid;
font-size: 1.4em;
color: white;
font-weight: bold;
}
.bg-image-front {
backface-visibility: hidden;
background-color: rgb(117, 211, 255);
}
.bg-image-back {
backface-visibility: hidden;
transform: rotateY(180deg);
background-color: rgb(85, 85, 85);
}
Any help would be greatly appreciated!
Related
So I have a door animation using vanilla JS with CSS for the styling. Is there a way to hid the backside of the door when it's open?
As well as making the door not clickable. (I don't have it as toggle, but you can still interact with the button.)
Basically I just want a back background and not see the backwards "1" when the door is open.
Any ideas on how to make that happen? I imagine it's adding another div with style, but I really am not sure after goofing around with this for a while.
Cheers!
Codepen here: https://codepen.io/LovelyAndy/pen/LYZKEvB
HTML:
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>
CSS
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top:50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: all 0.5s ease-in-out;
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px)
rotateY(-150deg);
}
.d1 {
top: 100px;
left: 60px;
}
JS
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
}
Possible solution: change the text color on transition:
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.toggle("doorOpen");
}
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top: 50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: transform .5s ease-in-out,
color 0s .3s linear
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-150deg);
color:black;
}
.d1 {
top: 100px;
left: 60px;
}
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>
You can achieve both disable the click on door button and not to show the '1' after the door is open in CSS.
.doorOpen {
...other css
// you just need add this property which disables click
pointer-events: none;
color: black;
}
Making the text color black will make it complete black.
If you completely want to remove the text '1' then you can do like below.
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
doorEl.textContent='';
}
These are two ways I can think of.
You can try to do something like this https://codepen.io/dom-the-dev/pen/MWeqaJq just have a button on the opposite side that acts like the back of the door
<div>
<div class="door-back">
<button class="door front">1</button>
<button class="door back">2</button>
</div>
While trying to describe it, I think it would be easiest to simply show the code.
<div class="cdm-animated-card">
<div class="cardTitle">
<h5 class="cardHeader">Collection Title</h5>
</div>
<img class="cardImage" src="collection/thumbnail.jpg" alt="alt text">
<div class="cardDescriptionDiv">
<div class="cardDescriptionText">
<a class="cardLink" href="link/to/collection">this is my clickable description</a>
</div>
</div>
</div>
Obstacle 1: Get the description div to "fade in" on hover. Here's my CSS for that, minus some stuff for the header and other non-relevant parts.
.cardsWrapper {
display: flex;
flex-wrap: wrap;
margin: 0px 10px 10px 10px;
justify-content: center;
}
.cdm-animated-card {
position: relative;
display: flex;
overflow: hidden;
/*other css*/
}
.cardDescriptionText a {
text-decoration: none;
color: #E6AA3C;
font-weight: 400;
padding: 5px;
font-size: 18px;
}
.cdm-animated-card .cardDescriptionDiv {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.cdm-animated-card .cardDescriptionText {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
width: 75%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.cdm-animated-card:hover .cardDescriptionDiv, .cdm-animated-card.active .cardDescriptionDiv {
opacity: 1;
}
Now when I hover over these cards, the description div fades in. Everything looks centered.. all is well.. but when I tab from elements higher up in the page, I can see [if I'm already hovering over a card], the description text gets that little blue border around it.
Problem is...
When I tab to the anchor [and I'm not already hovering] the animation never happens and basically, if I was unable to use a mouse, I'd never be able to see the description.
I've tried
.cdm-animated-card .cardLink:focus, .cdm-animated-card .cardDescriptionDiv:focus, .cdm-animated-card, .cardDescriptionText:focus {
opacity: 1;
}
basically the darts method... and also tried
.cdm-animated-card:focus .cardDescriptionDiv {
opacity: 1;
}
Because from what I understand, when you tab to an element, it is now "focused," I tried to say, 'when the description is focused via tab, change the opacity of the .cardDescriptionDiv element to 1 so that I can see it.'
tldr: when tabbing to a child, I would like its parent to change opacity.
--face palm--
I missed the ".parent:focus-within" pseudo-class.
.cardDescriptionDiv:focus-within {
opacity: 1;
}
Fixed
Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
I have a jQuery animation that turns a flashcard. This is the HTML:
<div class="stage">
<div class="flashcard">
<div class="front">
<p>Front</p>
</div>
<div class="back">
<p>Back</p>
</div>
</div>
This is my CSS:
.stage {
-webkit-perspective: 1000;
}
.flashcard {
height: 300px;
width: 500px;
margin: 10% auto;
border: 1px solid gray;
box-shadow: 2px 2px 2px #000;
-webkit-transform-style: preserve-3d;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
.flipped, .back {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.front, .back {
position: absolute;
-webkit-backface-visibility: hidden;
height: 300px;
width: 500px;
text-align: center;
}
.front p, .back p {
margin-top: 25%;
font-size: 3em;
}
And this is my jQuery code:
$(document).ready(function() {
$('.flashcard').on('click', function() {
$('.flashcard').toggleClass('flipped');
});
});
I made a For loop with PHP to loop my HTML code, so it can show multiple flashcards at once. The problem is that if I click on a random flashcard, all the flashcards turn at once.
What do I have to change in my code to make sure only the clicked flashcard turns around?
Try using $(this) not $(".flashcard") on the toggleClass() function. Because on your script, you are literally toggling all the class. Use that to fire event on a specific element that you want to trigger.
here is a working code
http://codepen.io/mozzi/pen/akwVrg
I've change the javascript to
$(document).ready(function() {
$('.flashcard').on('click', function() {
$(this).toggleClass('flipped');
});
});
I am trying to use the new AngularJS way of doing animations between page transitions and would like to incorporate a card flip (like http://jsfiddle.net/nicooprat/GDdtS/)
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
I am just a bit unsure how to update that code to make it work with AngularJS for a page transition.
Any thoughts?
I realize this was a long time ago, but I was just doing this, and it took zero javascript. The key is ng-class. Here is a JSFIDDLE.
The key is this line
<div class="card" ng-class="{'flipped':isFlipped}" ng-click="isFlipped=!isFlipped">
It will assign the class 'flipped' to the card when $scope.isFlipped is true. Here is a little NFL flash cards game I put together for fun. Check out the source code (which isn't super pretty), it should be helpful if you are doing something like this.
NFL Flash Cards
Here is an alternate solution where it's more clear from the html what's happening. Specifically, the flip mechanism is in angularjs rather than buried in css magic. Perhaps easier to follow for anyone who's not a css expert:
<div class="card" ng-click="isFlipped=!isFlipped">
<div class="face front" ng-class="{'flipped':isFlipped}">
Front
</div>
<div class="face back" ng-class="{'flipped':!isFlipped}">
Back
</div>
</div>