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!
Related
I have a menu that becomes a fixed menu when scrolling down the website. When that happens, the class r-header-fixed is added (and removed when scrolling back up). The logo that is inside my fixed menu is smaller than the one you see on pageload but when I scroll the size instantly changes. How can I ease the transition?
This is my css line:
.r-header-fixed .container .row .col-md-3 .r-logo .d-inline-block .logomurrays{
height:70px;
}
I tried adding transition: height 4s; to that, but the change is still instant.
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 an extending line animation on my site using CSS3. It was created using key frames on the width of the div and naturally it seems to be expanding left to right. However i wish for it to expand from right to left. I have tried using 'reverse' in animation-direction but with no joy. Any ideas why? thanks.
Here is my fiddle
http://jsfiddle.net/edrtB/
CSS
.line_left {
height: 6px;
width: 32vw;
background-color: black;
margin-top: 300px;
margin-left: 40px;
border-radius: 5px;
float: left;
-webkit-animation: expand 2s; /* Chrome, Safari, Opera */
animation: expand 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes expand
{
from {width: 0vw;}
to {width: 32vw;}
}
/* Standard syntax */
#keyframes expand
{
from {width: 0vw;}
to {width: 32vw;}
}
UPDATE
It has been made clear, that it is hard to see what im trying to achieve. Here is an image of the site logo, and the lines need to animate from the centre outwards.
Your problem isn't with the animation, it's with how the element is positioned on the page; since it's float:left, it's going to stay as far to the left as possible. If you change it to float:right, it'll move as far right as possible and expand to the left.
Here's an updated version of your fiddle.
If you don't want your expanding bar on the right side of the page, you could wrap it in a containing <div> and position that however you'd like. See this new fiddle update, in which I'm centering the expanding bar by setting the container's width and giving it margin:0 auto.
Edit: If you want the fully-expanded bar to be effectively "left-floated," use the above technique of wrapping it in a <div>, setting that div's width, and floating it left, as in this new fiddle update.
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.