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/
Related
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?
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; }
Heyy.
I've been trying to figure this out and I've looked all over but so far nothing's worked so I thought maybe you could help me out.
I'm working on a new tumblr theme with masonry and I want the post captions to slide down when a post is hovered on. I got that bit working but the problem is the post underneath the one hovered won't be pushed down when the caption opens, and that means that bigger captions will be hidden behind that post.
Here's the code I have:
.c220 {
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
background: white;
}
.p200:hover .c220 {
max-height: 500px;
transition: max-height 1s ease-in;
}
And here's the link to see it live: https://thm-maddison.tumblr.com/
The captions I have aren't too big so they don't get hidden but I'd like the post below them to be pushed down about 60px if that's possible.
Thank you for your help and I wish you all a great 2017!
You need to do this without applying position: absolute; to the <article class="p200... elements. Absolutely positioned elements are outside of the html element flow.
I am developing with Vaadin 7 and wanted to create a sidebar, which can be toggled visible via button click. The sidebar-container appears / disappears with a CSS rotation animation and folds to the right.
All the components are placed in CSSLayouts and organized like this (Every container represents one Layout-object):
I want the mainContainer to take the full width of the root-container when the sidebar is toggled invisible. My problem is that the sidebarContainer only shows up if I give it a static width (e.g. 300px). When invisible, a white blank space remains where the sidebar used to be.
Here some pictures showing my idea of the result:
My orientation was the Vaadin Sampler, where the menu Button unfolds a sidebar and the main content gets moved to the left. Which possibilities exist to realize such a smooth container resizing animation?
Thanks in advance!
I figured out how to solve the problem with a combination of styling and Java code.
The button click event resizes the .sidebarContainer cssLayout. When the sidebar is toggled invisible, the layout width is set to 0.
The sidebar container adapts two animation CSS classes for the opening and closing animations, which are also directed by the button click event.
Java
public void buttonClick(ClickEvent event) {
if (sidebar.getStyleName().contains("sidebar-in"))
{
sidebar.removeStyleName("sidebar-in");
sidebar.setStyleName("sidebar-out");
sidebarContainer.setWidth(0,Unit.PIXELS);
return;
}
sidebar.removeStyleName("sidebar-out");
sidebar.setStyleName("sidebar-in");
sidebarContainer.setWidth(300,Unit.PIXELS);
}
To let the .mainContainer shift as smoothly as in the Vaadin sampler application, I gave the .sidebarContainer a transition attribute. Now, when this container is resized by the button click event, the CSS ease-function creates a width-changing movement and the flex-layout of the mainContainer makes it stick to that movement. The sidebar itself is a panel inside the .sidebarContainer.
CSS
.mainContainer {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex: 1;
order: 1;
width: auto;
}
.sidebarContainer {
order: 2;
transition: width 1s ease;
-moz-transition: width 1s ease;
}
.sidebar-in{
animation: sidebarAnimationFramesIn ease 1s;
animation-iteration-count: 1;
transform-origin: 100% 50%;
animation-fill-mode:forwards;
width: 100%;
}
.sidebar-out{
animation: sidebarAnimationFramesOut ease 1s;
animation-iteration-count: 1;
transform-origin: 100% 50%;
animation-fill-mode:forwards;
width: 100%;
}
I realized the toggle-animation of the sidebar by adding Keyframes in CSS
The good and the bad of a CSSPanel is that it is a white table, where everything can be done, but still needs to be write (like css styling and such).
I can suggesto to take a look at HorizontalSplitPanel where you should block and hide the separator. It should listen perfectly when you decide to collapse a side.
I havent tasted it right now on your use case but i have used before and never had an issue. Give it a go!
I have a page with a text input like the one you can see in this fiddle
Source
Easier to see on JSFiddle...
Notice how the input is slightly off vertical center when you first visit the page. Now click on the text input and watch a set of extra controls expand. Now the text input jumps up to perfect vertical center. Bluring the text input causes the controls to collapse and the text input is no longer at vertical center.
Note: the extra controls will not hide if you enter at least one letter in the text input.
Does anyone have any idea why the input won't stay at vertical center?
Thank you for your time.
It seems to be going off center because the "hidden" state of your controls, although not viewable, is still being rendered in the DOM. However, unlike your "active" state, the "hidden" state's width is declared as 0, causing all the elements to wrap together. This is affecting the vertical height of that element, causing the discrepancy.
I get what you're going for, but the current way you're setting up the CSS won't get you there I don't think. Your current way of centering is dependent entirely on the margin-top: 30px declared on your .options class. What would probably work better is wrapping both the .input and the .options class in a container class, and do your vertical centering there.
Here's an example of what I mean: http://fiddle.jshell.net/YuZHg/6/ (although you can still see the slight wrapping happening on the transition)
A far more solid way to center inline elements vertically is to set line-height to the same value as height.
Add this:
section.explore header {
line-height: 100px;
}
Remove this:
section.explore header div.input {
display: inline-table;
}
And change your <div>s to <span>s so both options and search bar are inline/inline-block elements.
jsFiddle
Of course your transitions are broken now and you'll need to use a different method.
EDIT: After a bit of fiddling I got it mostly working jsFiddle, mostly by removing a bunch of styles :P The width transition doesn't work yet though.
The main issue, by the looks of things is the height on your options div is adding to the container block and pushing down the input.
The css for this is :
section.explore header div.options {
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
opacity: 0;
display: inline-block;
height: 0;
margin-top: 33px;
max-height: 30px;
max-width: 0px;
overflow: hidden;
position: relative;
text-align: left;
width: 0px;
}
The problem is your a combination of the height, max-height.
There are much easier ways to achieve what you're trying though:
If you know the heights of each of the elements and responsive layout isn't a consideration, just position them accordingly using absolute positioning.
Here's a good article on vertical alignment:
http://css-tricks.com/centering-in-the-unknown/