So I onClick I add a class to my container. When I select my button, I hide the content, add some transition to flip the container then display some info. Below is the code i'm using..
$('.btn-click').on('click', function() {
$('.content').toggleClass('hidden');
$('.card_container').delay('slow').toggleClass('class_active');
$('.info').toggleClass('display');
});
and the styles for the class are:
transform: rotateY(180deg);
transition: .7s ease-in-out;
background: black!important;
The issue is, the hide and show of .content class is too slow so I can see it before the .card_container has finished rotating. How can I delay the rotation. I tried .deley('slow') but didn't work?
I've added images below to show before & after,
Before:
After:
EDIT
So here's a fiddle for better understanding of my issue, sorry! https://jsfiddle.net/74vgvvhc/
As you can see, it a slight delay on the content (the text) when transitioning. I want the content to fade out, flip the card, then fade the other content in.
You can use fadeToggle with a delay
$('.container').on('click', function() {
$('.content').toggleClass('hide');
$('.container').toggleClass('card_active');
$('.info').delay(500).fadeToggle('display');
})
JsFiddle https://jsfiddle.net/kjarriho/74vgvvhc/7/
Hopefully this helps!
Just toggle the class '.info' to '.display' after a delay of 700 milliseconds as you have given the transition time 'transition: .7s ease-in-out;' for '.card_active' in css.
$('.container').on('click', function() {
$('.content').toggleClass('hide');
$('.container').toggleClass('card_active');
$('.info').delay(700).fadeToggle('display');
})
You can check the whole thing here https://jsfiddle.net/Rit_Design/eubrqnew/
You can toggle the info and card_active classes in a setTimeout after 700ms. This works, but isn't very elegant:
$('.container').on('click', function() {
$('.content').toggleClass('hide');
$('.container').toggleClass('card_active');
setTimeout(function() {
$('.info').toggleClass('display');
$('.container').toggleClass('card_active');
}, 700);
})
html,
body {
background: lime;
}
.container {
width: 150px;
height: 150px;
background: white;
border: 5px solid white;
}
.content {
display: block;
}
.info {
display: none;
}
.display {
display: block;
}
.hide {
display: none;
}
.card_active {
transform: rotateY(180deg);
transition: .7s ease-in-out;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<span class='content'>The content</span>
<span class='info'>The info</span>
</div>
Related
Let's say I want my website to display "CSS" and, when hovered, make a sliding animation that results in displaying "Cascading Style Sheets".
I achieved a similar animation using the font size as a workaround (Fiddle) but I would like the words to slide from the initials.
Any idea on how this could be done using the simplest forms of CSS or JS ?
p span {
font-size: 0px;
transition: all 0.3s ease-out;
}
p:hover span {
font-size: 15px;
}
<p>
C<span>ascading</span>
S<span>tyle</span>
S<span>heets</span>
</p>
here is a js solution, it could be a bit better because I reuse the same logic in both functions but that works, feel free to change where the listener listens (in this case document)
const mouseEnterHandle = (event) => {
if (event.target.closest('p')) {
event.target.closest('p').querySelectorAll('span').forEach(el => {
el.style.width = el.scrollWidth + 'px';
})
}
}
const mouseOutHandle = (event) => {
if (event.target.closest('p')) {
event.target.closest('p').querySelectorAll('span').forEach(el => {
el.style.width = 0;
})
}
}
document.addEventListener('mouseover', (event) => mouseEnterHandle(event))
document.addEventListener('mouseout', (event) => mouseOutHandle(event))
document.removeEventListener('mouseover', (event) => mouseEnterHandle(event))
document.removeEventListener('mouseout', (event) => mouseOutHandle(event))
p {
overflow: hidden
display: flex;
}
p:hover span {
opacity: 1;
}
p span {
transition: all 0.3s ease-out;
width: 0;
opacity: 0;
display: inline-flex;
overflow: hidden;
}
<p>
C<span>ascading</span>
S<span>tyle</span>
S<span>heets</span>
</p>
So, after seeing bluebird's answer, I tried to come up with a CSS-only answer.
I achieved the desired result, the only "trick" here is that it is needed to measure the (approximate) width of the words. Here, they respectively are of 56, 24 and 33 pixels wide. I added the length of a space (3.2px) to the first two.
I tried to put
p:hover > span {
width:100%;
}
to avoid this case-by-case solution but it then expands too much.
If anyone has a more (CSS-only) general solution, this answer would be perfectly completed.
p {
display: flex;
}
p:hover > #cas {
width: calc(56px + 3.2px);
}
p:hover > #sty {
width: calc(24px + 3.2px);
}
p:hover > #she {
width: 33px;
}
p span {
width:0px;
overflow:hidden;
transition: all 0.3s ease-in;
transition: all 0.3s ease-out;
}
<!DOCTYPE html>
<html>
<body>
<p>
C<span id="cas">ascading</span>
S<span id="sty">tyle</span>
S<span id="she">heets</span>
</p>
</body>
</html>
I've got a setup where I'm using divs as buttons, and when they're clicked they add to ingredients to my burger.
JS:
<div id="ingredientBox">
<Ingredient
ref="ingredient"
v-for="item in currentIngredients"
v-on:increment="addToBurger(item)"
:item="item"
:lang="lang"
:ui-labels="uiLabels"
:key="item.ingredient_id">
</Ingredient>
</div>
With CSS:
.ingredient {
border: 1px solid #f5f5f28a;
padding: 0.8em;
width: 23vh;
height: 19vh;
background-color: green;
border-radius: 25px;
margin: 10px;
text-align: center;
}
I now want the div to react visually when clicked (maybe change color for like 0.2 seconds or something. I've looked around and only find info on how to change color permanently, is there a simple way of changing the color for just a brief moment?
You can use CSS keyframe animation to pull this off:
#keyframes animate-burger-button {
0% {
background: red;
}
50% {
background: yellow;
}
100% {
background: green;
}
}
#ingredientBox:active {
animation: animate-burger-button 0.8s forwards;
}
I would also add another note to try and use a button instead of a div, make accessibility a lot easier.
You could do something like
#ingredientBox:active {
color: red;
}
You could use setTimeout to add a class to the button and then remove it.
code:
buttonTrigger() {
element.classList.add('somesyle'); // add colour changing class to element
setTimeout(() => {
element.classList.remove('somestyle'); //remove the class after 0.2 seconds
}, 200)
}
EDIT
I was going to also suggest using CSS keyframes but #AlexanderKaran already suggested it. That is a good option too.
I've been trying to find some information about this, but I cant find some good information.
I want to make a div, that says "Contact Us" and when you click on the div, a layer shows up smoothy with input types.
I know that I can make some quick javascript to change from display:none to display:block, but how can I do it smooth?
for an example (just a quick example, the actual one will be better)
<div id="contact-us" onClick="showContactUs()">
<div id="contact-us-content" style="display: block;">
Name - <input type="text" name="name">
Email- <input type="text" name="email">
</div>
</div>
And then javascript is
function showContactUs(){
var r = document.getElementById("contact-us-content");
r.style.display = "block";
}
If any of you have any tips, or a link I can check I would appreciate it.
I am not that good with jquery, but can absolutely try some if you think its better.
There is no way to make the appearing smooth by setting display: block. You can, however, transition opacity. I suggest adding a class by javascript and solving the rest by css.
Check it out here: https://jsfiddle.net/3wLrfk3d/
$(document).on('click', '#contact-us', show_contact_form)
function show_contact_form () {
$('#contact-us-content').addClass('shown')
}
css:
#contact-us-content {
opacity: 0;
transition: opacity .5s ease;
&.shown {
opacity: 1;
}
}
My example uses jquery and sass, I am sure you will be able to rewrite it to vanilla and css.
I usually transition the opacity, but that will mean the element will be there even if it's invisible, taking up space and blocking mouse events. I solve this by having two classes, one to fade the element and one to hide it completely when it's done fading out:
$(function() {
var $box = $('.box');
$('.toggle').on('click', function() {
if (!($box).hasClass('visible')) {
$box.addClass('transitioning');
setTimeout(function() {
$box.addClass('visible');
}, 1)
} else {
$box.removeClass('visible');
setTimeout(function() {
$box.removeClass('transitioning');
}, 400)
}
})
})
body {
font-family: Helvetica, Arial, sans-serif;
}
.box {
background-color: #333;
color: white;
border: 5px solid white;
padding: 50px 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4);
text-align: center;
transition: opacity .4s ease-in-out;
display: none;
opacity: 0;
}
.transitioning {
display: block;
}
.visible {
opacity: 1;
}
.toggle {
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Toggle Box</button>
<div class="box">
<h1>Hi there</h1>
</div>
Note: this is a quick and dirty example, it kinda freaks out if you spam clicks on the toggle button, I'll leave that up to you.
I have noticed this 'issue' lately when trying some stuff.
Say I want to create a drop-down menu or an accordion.
This is my HTML:
<div class="wrapper" onclick="toggle()">
I want to be animated!
<div class="content">
Was I revealed in a timely fashion?
</div>
</div>
Stylesheets:
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
display: none;
}
.content.visible {
display: block;
}
JavaScript:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
test ? content.classList.remove('visible') :
content.classList.add('visible');
}
I am trying to achieve a nice, smooth animation when we toggle the state of the content. Obviously this does not work. Anyone can explain to me why it does not work and how to fix it? Many thanks.
Link to the JSFiddle.
First things first, some CSS properties CANNOT be transitioned, display is one of them, additionally only discrete values can be transitioned, so height: auto cannot as well.
In your case the problem is with height: auto, while there are a few hacks for doing this, if you are just showing and hiding stuff, why not add, and use jQuery's toggle instead?
$(".content").toggle("slow");
jsFiddle
--EDIT (without jQuery)--
Because it's the auto that is giving us problems, we can use javascript to replace auto with a value in pixels and then use the css transition normally, if your content doesn't have a scroll, we can easily take that value from the scrollHeight property:
function toggle () {
var content = document.getElementsByClassName('content')[0];
var test = content.classList.contains('visible');
console.log(test);
if (test) {
content.classList.remove('visible')
content.style.height = "0px";
} else {
content.classList.add('visible');
content.style.height = content.scrollHeight + "px";
}
}
Css
.wrapper {
background: red;
color: white;
height: auto;
padding: 12px;
transition: 2s height;
}
.content {
height: 0px;
display: block;
transition: 2s height;
overflow: hidden;
} /* totally removed .content.visible */
jsFiddle
I have a <div> which expands when clicking on it and again click to it back in normal size which is fine BUT I am wanting to have Something like ...
When click on the <div> (class name .topHead) it should expand and return to normal size if the cursor is moved from the <div> without the need to click to bring it back to the normal size
Is this possible? Any solution will be appreciated.
js Fiddle : http://jsfiddle.net/saifrahu28/u6YWZ/
HTML
<div class="topHead" ></div>
CSS
.topHead {
height: 60px;
width: 100%;
background: #ccc;
overflow: hidden;
border-bottom: 6px solid #fa9a37;
z-index: 999;
transition: all 1.1s ease;
cursor:pointer;
}
.topHead.active {
height: 100px;
z-index: 999;
background: blue;
border-bottom: 6px solid #fa9a37;
transition: all 0.7s ease;
box-shadow: 0 4px 2px -2px gray;
cursor:default;
}
JS
$(".topHead").click(function() {
$(this).toggleClass("active");
$(".TopsliderArrow").toggle();
});
try this
$(".topHead").click(function() {
$(this).toggleClass("active");
}).mouseout(function(){
!$(this).hasClass("active")||($(this).toggleClass("active")/*,...*/);
});
http://jsfiddle.net/u6YWZ/2/
$(".topHead").on("mouseout",function() { // you may use mouseleave as well instead of mouseout
$(this).removeClass("active");
$(".TopsliderArrow").hide(); // Not Sure what this does but I guess you may hide this
});
Add this to your js
I'd be worried about getting the active class and TopsliderArrow visibility out of sync using toggle(). This method doesn't use toggle so may better suit your needs.
$(".topHead")
.on("click",function(){
if($(this).hasClass("active")){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
} else {
$(this).addClass("active");
$(".TopsliderArrow").show();
}
})
.on("mouseout",function(){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
});
Demo Fiddle
UPDATE:
Turns out toggle() works just fine:
$(".topHead")
.on("click",function(){
$(this).toggleClass("active");
$(".TopsliderArrow").toggle();
})
.on("mouseout",function(){
$(this).removeClass("active");
$(".TopsliderArrow").hide();
});
Working Demo Fiddle