I have a list of items with an indicator that expands on hover using simple CSS animations, see the jsfiddle below.
https://jsfiddle.net/jsiman/p9kqoc8h/8/
#keyframes indicator-hover-on {
0% {
width: 10px;
}
100% {
width: 20px;
}
}
#keyframes indicator-hover-off {
0% {
width: 20px;
}
100% {
width: 10px;
}
}
When a section is clicked, I want that indicator to remain expanded. Any hovers on other sections will still trigger the animation but I want to be able to show an "active" indicator state. When another section is clicked, it will show the "active" indicator state and the old one will transition back to the unexpanded state.
Is this possible with pure CSS transitions? I know how to achieve this functionality using d3.js and I want to stay away from jQuery.
i do not think that's possible.
from your question it sounds like you want it to happen during a click.
click event is something that is captured by javascript, or any other way that implements javascript, i do not know any other way to catch events.
Related
I've tried searching for a solution to this problem, but haven't found one yet.
What I'm trying to do is simple:
When I click one button, I'd like a box to move 200px to the right with CSS transitions. When I click a second button, I'd like the box to move 200px down from the position it is currently in.
I have this basic code here:
HTML
<button class="one">First</button>
<button class="two">Second</button>
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s;
}
.box.transOne {
transform: translateX(200px);
}
.box.transTwo {
transform: translateY(200px);
}
JS
$(".one").click(function() {
$(".box").toggleClass("transOne");
});
$(".two").click(function() {
$(".box").toggleClass("transTwo");
})
However, when I click on button number two, the box does move 200 down, but it moves diagonally back to the first X axis position while it's going down (I.e. it doesn't stay 200px over on the X axis).
Is there a way I can possibly do this with keyframes? Like triggering a second keyframe with a second button click, etc. Or is there a better way? I'm pretty stumped and can't find any solutions, so any help is much appreciated. Thanks!
SHORT ANSWER
set the translation X in class .transTwo too
.box.transTwo {
transform: translate(200px 200px);
}
EXPLANATION
the transform is overriding the others, this is the nature behaviour of the css, just like other property color, background-color,
The basic rule is the latest property set is the strongest, the strongest is at inline style unless you implement !important
I was wondering if it is possible to : when hovering over a toggle menu (has ID 9) in Wordpress to display an hidden image (Lets say has ID 10). It looks like this now https://wortelboeryachting.com/wp-content/uploads/2020/04/Screenshot-2020-04-29-at-20.29.36.png. I want to be able to hover over the toggle menu on the left and make an image, currently hidden behind image on the right, to appear. If possible in CSS addition code because I am not very familiar with JavaScript.
Thanks for the help!
If you only want to use CSS, you can put the images into pseudo-elements of the menu items. Only to show you the concept:
.myMenuItems::after {
width: 100px;
height: 100px;
background-image: url('yourimagepath');
background-size: cover;
opacity: 0;
}
#myMenuItem:hover::after {
opacity: 1;
}
Of course you can use a class and it may better to position the image absolute.
If you want to overlay as you said, you can make this happen with the css property "z-index", instead of "opacity".
I have a page consisting of a component Main.
Main further contains two components - NavBar and Body. Body also contains two components - ViewTable and AddPerson. Inside the ViewTable component, I want a modal to load when a field in the table is clicked. I've got the functionality right but I'm stuck at the CSS part.
Right now, the modal looks like this -
How should I go about doing so? I'm new to React and the component structure
There's a good react library called react-modal i can recommend. It's a bit hard to get into but once you get it to work it's great.
If you want to do it the vanilla way, use position: absolute for the modal. To get the transition to work, use react-transition-group to toggle the opacity and animate the transition. It'll probably take some time to get into react-transition-group since it's a bit confusing at first glance.
As suggested by #gian.gyger, react-modal with react-transition-group is the right way to go.
But, if you have already implemented the modal with plain react and want help with CSS alone, this could help. To make the modal position fixed so that it doesn't occupy space in the lower layer, we could give the following
.modal-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width:100%;
background-color: rgba(0,0,0,0.4); /* for darker background when modal is open*/
/*z-index sets the modal on the higher stack above all of the others */
z-index:10
}
.modal {
width: 50%; /* or above or lesser */
background: red; /* modal background color */
margin: 20% auto;
}
Here, I am assuming that element with modal-container class is activated only upon the desired action (like, a button click) and modal-container is an empty div that just contains within it the modal element
Reference: W3Schools
I know this probably cannot be done without javascript but I dont mind using it.
I have a div that grabs the width percentage with PHP.
All I need to do is that on page load I would like the bar ( Div ) to start at 0px width and transition to the correct width percentage.
I can do it fine of course on a Hover or Active state but cant seem to get it right with page load.
Do you use jQuery? Theres a built-in document ready function. Inside of that, add a class to the div. Then in your CSS you can style the two different states of the div to accommodate the transition
Javascipt
$(function(){
$('.bar').addClass('.ready');
});
CSS
.bar {
width: 0;
transition: width 500ms;
}
.bar.ready {
width: 100%;
}
So I'm trying to create an animation on a webpage and am trying to figure out a way to do it using CSS3, but am quite confused as to how I can do it.
What I need to have happen is when users click on a link element I want a div to expand and be populated with content specific to the link element clicked. For example, when a user clicks on a link titled "About", a div below the link element will expand and have some content appear. THEN, when they click another link, say "Contact", the content specific to "About" will disappear and content specific to "Contact" will appear as the div re-sizes to fit the new content.
I think I can do this pretty easily with Javascript, but can someone tell me if it might be easier to do/possible with CSS3?
Thanks all.
As already mentioned, JavaScript is your best friend for this. But since you asked if it would be possible with CSS3 I had to give it a try. Basically what I’ve done is I’ve used the target selector to trigger the animation. So when you click a link, a div expands with some content and if you click another link a new div, with some new content (positioned in the same place) expands, creating the illusion that it’s the same div expanding.
It’s not an optimal solution and I made this example really quick so it’s not working exactly as you wanted, but it gives you at least a picture on how it could be done with just CSS.
Hope that helps!
Here's a demo and here's the code from my example:
HTML
Box<br />Box two
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>
CSS
#box, #boxtwo{
position: absolute;
top: 50px;
left: 50px;
width: 0px;
height: 0px;
background-color: #e3e3e3;
color: transparent;
}
#box:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#boxtwo:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#-webkit-keyframes expand {
0% {width: 0px; height: 0px; color: transaprent;}
50% {width: 100px; height: 100px; color: transparent;}
100% {width: 100px; height: 100px; color: #000000;}
}
The simplest way for a click to trigger an animation is to add a CSS class to an object upon the click and have an CSS3 transition or animation configured for any object with that class.
Your second class to hide the item can then remove that class name from the same object.
All the details of the animation/transition would be specified in CSS3 style rules. Only the add/remove of the class name would be done with javascript.
CSS3 all by itself can trigger animations/transitions with the :hover pseudo selector, but isn't a lot more capable than that and can't trigger an animation based on a click.
I don't think this is a CSS3 vs. JavaScript question. Even if you use CSS3 for the animations, you're likely to need JavaScript to trigger the animations based on a click event.
Based on what you need to do, I see a couple of main options:
As #jfriend00 said, add or remove CSS classes which perform the animation.
Use jQuery's show, hide, fadeIn, fadeOut, and animate APIs.
What you need is some juery to spice up whatever you are developing... If am not wrong you want some thing like this: CSS3 vs Jquery
Get the jquery library and reference it in your page.
here is a snippet to jump start you.
<a id="home" href="home.html">Home</a>
<a id="about" href="about.html">About</a>
<div id="home_div"></div>
<div id="about_div"></div>
<script type="text/javascript">
$('#home').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().show('slow');
$('#about_div').animate().fadeOut('slow');
return false;
});
$('#about').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().fadeOut('slow');
$('#about_div').animate().show('slow');
return false;
});
</script>
You can change the effects to other available ones.