Solved

css transitions

Posted on 2013-12-13
11
260 Views
Last Modified: 2014-01-22
Hi

I am trying to create a CSS transition whereby div areas fade in/out when a menu is clicked

I used display:none originally but noticed transtions dont work with this. I have tried visibiity:hidden but the divs now dont sit in correct place.
Any ideas how to fix this?

My page is here:

https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html

its the area "What we do"


Thanks
0
Comment
Question by:coolispaul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
11 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39716900
I'm not sure which div areas you would like to fade in and out, so can't give you actual code.

but, you can use opacity or background-color for fading type transitions.

core example:

.mydiv{
   opacity:1;
   background-color:red;
   transition: all 1s;
}

.mydiv:hover{
   opacity:.5;
   background-color:blue;
}

Open in new window

0
 

Author Comment

by:coolispaul
ID: 39716936
well its 2 divs that sit one after the other

so:

<div class="slide"></div>
<div class="slide"></div>

using display none pushes the second one up to the top as i intend. ( i dont want to show both at same time)

I guess i will have to use position absolute on these divs if i cant use display:none?

Thanks
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39716954
yes. that sounds correct. Give that a try, and if it's not working, let us know.
0
Turn Insights into Action

Communication across every corner of your business is essential to increase the velocity of your application delivery and support pipeline. Automate, standardize, and contextualize your communication processes with xMatters.

 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 500 total points
ID: 39717024
Create a container with position:relative an put both of the divs inside of the container.  style the divs with position absolute and then the will position at the same location and the transition should work fine. for the one you want hidden set opacity to 0.

However the hover is going to be an issue.  Display cannot be animated. so only the top div will respond to hover.

To get the second one to respond you can use a sibling reference

div:hover~div { etc..

can be used so the hove event on the top layer also triggers the transistion on the bottom layer.

Cd&
0
 

Author Comment

by:coolispaul
ID: 39717064
how do you deal with heights when positioning absolute like this though?

The parent container wont get an automatic height from the child elements?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39717175
I'm not sure what exactly you are trying to do. I don't see any <div class="slide"></div> on your page.

Which items exactly do you want to fade in and out based on what conditions? Please be specific.
0
 

Author Comment

by:coolispaul
ID: 39717192
on here:
https://dl.dropboxusercontent.com/u/35928349/OW/UVEX/HTML/index.html

Under "What we do"

there are 2 buttons that show/hide 2 div's

It works but i have had to give the parent element a fixed height because the child elements are now positioned absolutely.
This could be a problem as its a content managed site so more content could go in theer and this fixed height may become incorrect
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39717273
When you generate the page you know what content you have so set the height of the parent dynamically based on content.  Either during generation server side (best) or with script on the client (some client may not have javascript enabled).

Cd&
0
 

Author Comment

by:coolispaul
ID: 39717319
Yep guess will have to do that.

Thanks
0

Featured Post

More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question