I have a feature in my React app that allows users to see a UI in both mobile and desktop sizes. I have my wrapper and I change the width of it by using classes like this:
.wrapper.desktop {
width: 720px;
}
.wrapper.mobile {
width: 320px
}
I also animated changes of width by using:
transition: width 500ms ease-in-out;
Now, the problem is that I want to fade the children and content of my wrapper while changing the width to have smooth animation and a loading overflow. Is it possible to use CSS and how? If not, is it possible in React and how?
Related
I'm using the slick slider to show an centered slider on my site.
The slider should show one item in the center and display smaller items left and right.
To do this, I'm using centerMode and variableWidth.
The problem now is, that the slides are "jumping" after every change.
It looks good in the docs. What is my mistake?
Here's my code: http://jsfiddle.net/vv4j3uz2/1/
The only problem is that you have two different image's heights whether its parent slide has the center class or not.
.slider-header .slick-slide img {height: 520px; [...]}
.slider-header .slick-slide.slick-center img {height: 600px; [...]}
Make them the same and your issue is gone ;)
If you give the .slick-track some CSS animation transition it works well.
.slick-track { transition: all 0.3s ease; }
I have a weird problem with my personal website. Let me explain the context:
I have some stacked sections which have to be (each one) the same height as browser window. That is, if the browser window has 500px of height and I have 5 sections, the whole website would be 500*5 = 2500px height.
If I just define my sections with height: 100% them remain 0px height. To solve that I used the next trick:
html, body {
height: 100%;
}
This way, the container of the sections (the body) has also 100% height of the browser window, so my sections now have the desired height.
But after that, I want that the background color of the body changes depending on the section we are. This causes an strange problem. The color doesn't change in a logical way. Better see it on my website. This seems to be related with the fact that the body is actually smaller than my website. Remember, my body has 100% height (for example, 500px) and my website 100% * number of sections (2500px). But I'm not really sure about that because I tried to reproduce the error on a simple fiddle and I can't.
A curious thing is if you mouseover my website logo (which have a transition animation related with a rotation transform) the background change its color correctly. Something related with website refreshing, I suppose.
By the way, the color of the body is also changing with a transition, but you can disconnect it on the inspector if you want. That seems no to be the problem.
If you need more information please ask for it. Thank you for your help and attention.
PS: This happens on Chrome 32. In Firefox all works. So compare both browsers to understand better the problem, if you want.
I partially solved the problem with pseudoelements (then, I don't lose the semantics of my html) but I'm not satisfied because I think it has to be a better and cleaner way.
I put all the sections inside a div called "main-content" (of the website). Then I also defined this div with height: 100% (otherwise the height trick stops working). Then I define a before pseudoelement with this css:
#main-content:before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
-webkit-transition: background-color $speed;
-moz-transition: background-color $speed;
-o-transition: background-color $speed;
-ms-transition: background-color $speed;
transition: background-color $speed;
}
And then I attach to this fixed layer pseudoelement all the changing background color code, instead of using body. This works, but fixed elements and mobile browsers aren't good friends. So I think that this problem deserves a better solution.
I have 2 divs one for expanding content and one for heading text.
I expand them by changing a class on the parent element (via javascript) and then setting height/width to 0 and visibility to hidden
I'm trying to figure out why the css animation stops running after the first expansion and how to make the timing consistent.
I'm using max-height for the animation because I don't know the target height.
JSFiddle
[data-element] {
transition: max-height 4s ease;
}
.collapsed [data-element="collapsed"] {
max-height: 900px;
height: auto;
width: auto;
}
I got something working here, but the animation with max-height causes a delay, making this not an ideal solution.
removing some of this helped
height:auto;
http://jsfiddle.net/XXRWx/1/
I'm trying to create a website using flexbox, and one of the main features of the site is to hide the navigation bar, in this case the left panel in the JSFiddle, when the viewport is between 480px and 1023px. Currently it works, but the animation is very jumpy and it is not clear what is happening.
Right now I am trying to use a transition in css3, but that doesn't seem to animate anything at all...
Going from this:
aside {
-webkit-transition: all 1s ease;
width: 270px;
}
To this:
aside {
display: none;
}
No transition happens between the two states.
How can I animate the navigation disappearing and the main growing to fit the screen?
You can not animate Display in CSS as of today.
You can probably chain animation on some properties that can be animated. For instance the width and height of some flexboxes.
I am stumped after a very humbling 15 hours worth of attempts. :/ I am doing a freebie because it looked like a simple opp to test theories for a device responsive site. Not. I have a feeling like maybe I am overthinking it. It is something I am working hard to learn. Any feedback or push in the right direction would be greatly appreciated. I am new to both HTML5 and coding for devices first.
Using: http://byevan.com/web-template/BuzzApp/
Test Site: http://justimaginewebdesigns.com/nathalie/mobile/
Image attached of what it should end up looking like on all devices.
Using a javascript to anchor the div for the links to the bottom.
Issue: Div container for links is not responsive in harmony with the bg image.
Using CSS3 for the main bg image make that responsive and the #media entries do their job although it is best viewed in landscape mode due to the bg image itself.
Using % based margins are inconsistent
Using % based relative positioning is inconsistent
Attempting to scrap keeping text and just using an image with hotspot rollovers fails miserably across devices.
Adding a left position attribute to the javascript mentioned above is inconsistent across devices.
Many more experiment attempts...
This should get what you're after for assuming you'll go with a mobile first design.You might need to add another few breapoints to get left margin right as the screen size increases.
You also should drop the image widths and heights off the navigation items and use
img {
width: 100%;
max-width: 100%;
}
and then set the widths of the images on the container divs.
.homelinks {
position:fixed;
bottom:100px;
left: 5%;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#media Screen and min-width(700px){
.homelinks {
position:fixed;
bottom:100px;
left: 26%;
}}