I'm trying to do a sort of accordion for my website, similar to the one on this website, but without the toggling.
The code I'm working with is here.
I have the basic setup working, but I can't seem to get the height of the li to transition properly (if at all); I'd appreciate some help.
Preferably the solution would only use CSS, but I am willing to use JS/jQuery if that's the only/best way.
I have tried reading other questions on this site to fix it, but I'm either doing something wrong or the solutions didn't help.
One way is to use CSS3 transitions (works in modern browsers), but it won't be possible (someone may correct me if I'm wrong) to transition height: 0; to height: 100%; So if you don't know the actual height, one way around it is to use max-height instead. In this case you will need to set the max-height to something greater than it will ever get.
So adding something like this might be what you are looking for?
li {
opacity: 0;
max-height: 0;
}
h2:target~li { /* Want to transition this */
opacity: 1;
max-height: 100px;
-webkit-transition: max-height 1.0s;
-moz-transition: max-height 1.0s;
-ms-transition: max-height 1.0s;
-o-transition: max-height 1.0s;
transition: max-height 1.0s;
}
DEMO
In your case, if you want to transition the opacity property as well you can just change transition: max-height 1.0s; to transition: all 1.0s; which means that you will transition all properties.
Here's a link if you want to read about CSS3 transitions:
http://www.w3.org/TR/css3-transitions/
Related
I'm currently trying to implement some CSS transition effects on a set of different panels, to give the appearance that they are "sliding in" from off screen. I want them each to appear in a different direction (e.g. top to bottom, left to right, etc.)
Presumably, to do bottom to top and right to left, I would just want to set translateX or translateY, but with a positive value, rather than negative. And then for all of them, I would just translate the value to 0 when I want them to appear on screen.
Here is a really simplified version of what I am trying to do:
HTML:
<div class="container">
<div id="about" class="panel">
<h2>About</h2>
<p>I'm Mike and I don't know!</p>
Close
</div>
<div id="projects" class="panel">
<h2>Projects</h2>
<p>Here are some projects I have worked on.</p>
Close
</div>
<div id="contact" class="panel">
<h2>Contact</h2>
<p>You can find me all over the Internet!</p>
Close
</div>
<div id="blog" class="panel">
<h2>Blog</h2>
<p>Here are some blog posts.</p>
Close
</div>
projects
blog
about
contact
</div>
CSS:
.container {
overflow:hidden;
position:relative;
width:100vw;
height:100vh;
}
.panel{
min-width: 100%;
height: 100%;
position: absolute;
box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
z-index: 2;
-webkit-transition: transform .8s ease-in-out;
-moz-transition: transform .8s ease-in-out;
-o-transition: transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.panel:target {
-webkit-transition: transform .8s ease-in-out;
-moz-transition: transform .8s ease-in-out;
-o-transition: transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.panel#contact {
transform: translateX(110%);
background-color:whitesmoke;
}
.panel#about {
transform: translateX(-110%);
background-color: red;
}
.panel#projects {
transform: translateY(110%);
background-color: blue;
}
.panel#blog {
transform: translateY(-110%);
background-color: gold;
}
.panel#contact:target{
transform: translateX(0%);
}
.panel#about:target{
transform: translateX(0%);
}
.panel#projects:target{
transform: translateY(0%);
}
.panel#blog:target{
transform: translateY(0%);
}
Note that the "About" and "Blog" links are transitioning as expected, whereas the "Projects" and "Contact" links appear to cause weirdness. Those are the two with positive values.
I'm having a really difficult time:
a.) understanding what the problem is exactly
b.) how can I fix it (if at all)
If someone could both explain what the browser is doing right now with those erroneous transitions and provide a solution, I would be much obliged. AFAIK, this is happening in every browser (that supports the :target pseudo element, anyway).
Let me know if you need clarification. Thanks a lot!
UPDATE: Not fixed, but I noticed that if you set the values to <98% for the offending element panels (Projects + Contact), the page transitions properly, though it isn't hidden from the screen. Not sure what that means, but if it helps...
UPDATE 2.0: Thanks for the comments, folks! I tried adding a container, and have updated the HTML and CSS to reflect that. The changes in question are a container div that wraps the panels, as well as the following CSS for that container:
.container {
overflow:hidden;
position:relative;
width:100vw;
height:100vh;
}
I'm still having similar behavior -- this is also updated in the Codepen. I think I understand now the issue, but I'm not quite sure why the page is still jumping to that element in question before applying the transformation. I can imagine there is some hacky way to get around this, but I would rather do it the "right" way.
I decided that using :target and trying to have this be pure CSS wasn't really the way to go, and wound up just using Javascript in a fairly straightforward manner.
Lesson learned: Don't try to do things w/ Pure CSS unless you really have to.
I have read a couple of tutorials online, but I can't seem to get a cross-browser working example together.
HTML:
<div ng-include="show ? 'views/registration/form_activation.html' : null" ng-animate class="drop-down"></div>
CSS:
/* ANIMATIONS */
.drop-down {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-ms-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
line-height: 100%;
}
.drop-down.ng-enter,
.drop-down.ng-leave-active {
opacity: 0;
max-height: 0px;
}
.drop-down.ng-enter-active,
.drop-down.ng-leave {
opacity: 1;
max-height: 100%;
}
What I would like to accomplish is that when the template is loaded with ng-include, it fades in from 0 to 100 opacity, and that it simultaneously opens like a dropdown (starting from 0, to full height that it needs). And vice versa when the form gets hidden.
The opacity already works, but changing the height does not, the div instantly appears with full height. Can some help me build the CSS with a cross-browser solution?
you have to define max-height in px in .drop-down class to make it work.
you can put any high value to max-height in px as you are anyways not defining the height.
also define overflow: hidden in .drop-down so that content is hidden on transition of height.
worked for me.
example demo here :- http://plnkr.co/edit/rXQQHTogKzAG91xw3JUx?p=preview
I'm afraid I'd drown everyone in code if I tried to include every relevant detail so for the sake of simplicity I made this so you can get your head around what I'm trying to do:
edited:
http://jsfiddle.net/LcsJL/6/
and the actual code I'm using:
.box-4 .box-subtitle {
position:absolute;
display:block;
border-radius:0 4px 0 0px;
-moz-border-radius:0 4px 0 0px;
-webkit-border-radius:0 4px 0 0px;
background:#403f3f;
height:60px;
width:199px;
padding: 11px 23px 0 12px;
max-height: 1000px;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.box-4:hover .box-subtitle {
background:url(images/bg-box.gif) 0 0 repeat;
}
.box-subtitle span {
font-size:15px;
line-height:23px;
color:#fff;
text-transform:uppercase;
font-family: 'Maven Pro', sans-serif;
font-weight:700;
background:url(images/bg-subtitle.png) 0 2px no-repeat;
padding:0 0 0 32px;
display:inline-block;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.box-4:hover .box-subtitle span {
color:#a6e7f0;
background:url(images/bg-subtitle1.png) 0 2px no-repeat;
}
What I want to happen is that when you hover over the larger box, both the div and the span contained within that div should fade in separate property changes.
The obvious question is, "is this even possible?" I know transitions are relatively new and there might be some bugs still, but I'd very much appreciate it if there is a way to do this, even if it's not through this method, if you could enlighten me as to how to implement it.
edit:
Okay, I managed to get the <span> to fade in the right way by using transition: background 1s ease, color 1s ease; since those were the only properties I wanted to change. The background is still posing a challenge as I have just discovered that background-image is not yet a supported property for transitions. Although I am using background: url(URL) 0 0 repeat; but it's still essentially a background image, which I why I think it's giving me trouble. Does anyone know any work-arounds for fading in background images? (opacity doesn't work since it fades out the whole div instead of just changing the background)
I've played around with the idea of having a normal state div nested on top of the hover state div and making the opacity of the normal state div transition out on mouse-over. I'm having trouble wrapping my head around how that would work though. If someone is capable of accomplishing such a feat, please jsfriddle me this, batman.
more edit:
Here's an updated jsfiddle of my problem, I can't get the divs to stack right even though I have them absolutely positioned over each other with z-index inside a relatively positioned wrap. Am I missing something?
http://jsfiddle.net/Ep2xa/1/
The problem is you didn't change opacity when hover.
Either use transition: background 0.5s ease; or set opacity when hover.
edit for comment:
background-image cannot be transitioned according to the spec: http://www.w3.org/TR/css3-transitions/#animatable-css
If you can use slightly altered html, you could use another div absolutely positioned over the image, then fade the background of that div. The problem with the way your html is structured, you'd have to know the exact height of the div with the background-image in order to cover only that and not the span. I've also moved the span outside .content1: http://jsfiddle.net/LcsJL/8/
original answer
Yes. There is no span inside .content1, so change this: .box:hover .content1 span to .box:hover span
I don't even know what I did, just started moving snippets around and removing some things and suddenly magic happened:
http://jsfiddle.net/LcsJL/9/
But, thanks a lot to brouxhaha for suggesting that background:rgba transition, it really helped.
I have to make a responsive website and as i shrink the browser to a specified size, i want the logo on the left to move to the right so that it is in the centre.
Here's an example of the transition i want to achieve. It is under "2.Animating your transitions" box1
I know that the transition starts on hover but is it possible to activate it when the browser is resized? or any alternative methods at all?
You can do this by using a mixture of CSS3 transitions and the #media queries.
div
{
height: 100px;
width: 200px;
position: relative;
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#media all and (min-width: 400px) {
div
{
background-color: #fc3;
left: 100px;
}
}
What this does is sets up the transitions on the element with relative position but obviously does not fire them (as there's no :hover or other selector) and declares a change in position (left: 100px;) when the browser is more than 400px wide. Use max-width for a "more than" value.
Obviously you need to change the values to what you need, but this is how it should be done.
http://jsfiddle.net/AvhvD/
Here is how i would do:
1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: #media (...) {
.logo {
margin-left: 0;
}
}
I was thinking that you could make a conditional statement in JavaScript and Jquery that would test the following to be true: If the browser window is resized and the size of the browser window is between a range, add a css class. If not remove the css class.
With this new class created, maybe you can make an animation using CSS3. I am not too familiar if this would work, but you could always just revert back to JQuery.
Furthermore, I don't know if transitions can be applied inside of media queries. If so, I am a big proponent and would highly recommend using them.
Hope I could help.
i am wondering if it is possible to set the height of a div with css animation.
I have a div that when you hover over it opens up but i want it to stay that height not shrink back to the original height.
Is this possible?
it needs to be done in pure css not javascript as its a website for college
You can do something like this:-
HTML:
<div class="divAnimate" onmouseout="this.className='setHeight'">Div Height Animation</div>
CSS:
.divAnimate {
border: 1px solid;
}
.divAnimate:hover {
height: 200px;
}
.setHeight {
height: 200px;
border: 1px solid;
}
Refer LIVE DEMO
You should use jQuery. CSS3 is not supported in all browsers. However, it is possible to use CSS3 to achieve this.
CSS:
#myDiv {
height:20px;/* initial height */
width:100px;
background:#aaa;
-webkit-transition: height .4s linear; /* you can replace 'height' with the attribute you are changing (eg: color, width...)*/
-moz-transition: height .4s linear;
-o-transition: height .4s linear;
-ms-transition: height .4s linear;
transition: height .4s linear;
}
#myDiv:hover {
height:100px; /* desired height */
}
HTML:
<div id="myDiv">
Hello World!
</div>
Hope this helps.
EDIT: Sorry, I didn't see that you needed it to stay that height. In order to do that, you would need to use something like onmouseout (or another event listener), which in the end would use Javascript anyway.
Yes, this is possible with just CSS3, but will only work in Safari/Chrome and recent versions of Opera, Mozilla Firefox, and IE10 as you need CSS3 animation keyframes to preserve the end-state of the transition.
http://jsfiddle.net/rPc88/3/