Take this dom as an example.
<div id="container" style="transition: width 1s ease-in-out;">
<div style="width: 400px; display: none;"></div>
<div style="width: 200px;"></div>
</div>
If I alternate which inner div is hidden, can I trigger the CSS3 transition (via reflow)? If this were possible, I could add many inner divs and alternate between them smoothly without having to know what size they were.
I wouldn't think it's possible via CSS alone - transitions are not inheritable, so they would have to be applied to the nested elements in question, and a width transition couldn't be applied without the width anyway so e.g. the nested div would need it's width and 0 set to transition between them either on a hover or a JS click or some event
however I think I really am failing to understand the question;
#container div {transition: width 1s ease-in-out;}
would apply it to all child divs then you just toggle the display and width however you're thinking of doing it anyway?
Related
In my Vue app, I have a div wrapper that wrap other div's. Here is a code example
<div class="items" :class="opened && 'items_opened'">
<div v-for="item in items" :key="item.id" class="items-item">
<div class="items-item-content" v-if="condition">{{content}}</div>
</div>
</div>
My wrapper .items doesn't have height, its height depends on how many .items-item-content (and .items-item) I have in it. .items has a height of 1 .items-item, but .items_opened has a height of multiple .items-item. In the end, I need my .items to have smooth height animation. It is clear that I have to use transition, but all my experiments failed. I can add animation to the .items-item-content and make their appearance animated, but this is not what I need. I need .items-item-content appears immediately, but .items height should be animated.
Can someone provide a solution on how to reach this, please?
Thanks!
I realize that css animations are a well covered topic, but I'm just wondering about the best way to create simple slide like transitions? Mostly, when you read about slide transitions like that, some kind of position:absolute is assumed. That is not the way content is usually organized in HTML and it shouldn't be.
So, if I want to create a transition of one div sliding to the left and one div sliding from the right, what would be a good strategy without assuming that any of those divs has absolute positioning or any other specific transition specific stuff going on to start with?
<div class="container">
<div class="this-should-slide-left">
<div>Some content</div>
<div>Some more</div>
</div>
<div class="this-should-from-left"><!--not visible initially-->
<div>Some more content</div>
</div>
</div>
I came up with this solution which seems to work, even though I'm not sure if it's elegant:
http://jsfiddle.net/CAg4f/4/
The best way to move elements around when animating is translating using css transforms.
For example, to transition when hovering over the container:
.this-should-slide-left,
.this-should-from-left {
transition: transform .25s
}
.container .this-should-from-left {
transform: translateX(100px);
}
.container:hover .this-should-from-left {
transform: translateX(0);
}
.container:hover .this-should-slide-left {
transform: translateX(-100px);
}
Translating makes the transition much smoother as it takes advantage of hardware acceleration plus there is no positioning involved, so you have complete separation between the design of the layout and the design of the animation itself.
Read more here
Aside from absolute positioning, there is relative positioning and margins.
While I would usually go with margins to manipulate a transition, relative positioning is probably the safest, as it will work for inline elements which can't necessarily be manipulated by margins.
http://jsfiddle.net/gvBM8/
Whenever you scroll over an image and it grows to the desired effect there is a white border that grows along the bottom as well. Is there anyway to stop this from happening?
Also, I am new to using CSS3 across multiple browsers, how would I set it up to be moz/IE compatible?
Thank you
HTML
<div class="col4 grow"> <img src="http://www.placecage.com/200/300" width="100%">
Apply img this css property:
img {
display: block;
}
Instead of giving to the tag, add a class to those img elements. that would be better.
Working Fiddle
Im having trouble vertical aligning 2 divs inside a 100% height div. I googled but failed solving.
pseudocode:
<div container, fixed height>
<img, dynamic height/>
<div inner, 100% height>
<div><img/></div>
<div><img/></div>
</div>
</div>
The two divs in the inner div, i want them to be in the vertical center of the inner div, but i cant find a way. its not possible to know the height of the inner div, its just set to 100% because of the random height of the image above it. The divs inside the inner div will also have dynamic heights.
2 hours of fiddling around gave no results, so im coming here.
The page where you can see it in action: http://pyntmeg.no/?iframe
You can give the parent DIV.container a position :relative property since it has a fixed height.
The inner div can then have a position:absolute and you set its height to 100% or maybe a little lower. you can use the top property to move it around.
Try:
.item {
position: relative;
top: 10%;
}
You may need to adjust top: 10%;
As long as the parent/grandparent divs have the width to work with it you can apply 'float: left' to the grandchild divs style.
vertical-align is meant for table elements, not regular divs, etc. In order to get vertical-align middle to work, the element needs to be set to display:table-cell and it's parent needs to be set to display:table-row
Be careful with that, though, because it really does change the way the element interacts with it's sibling elements, and it could definitely change how your page is laid out.
The best use of this would be something like this:
<div class="table-row">
<div class="td">lorem ipsum</div>
<div class="td">dolor sit amat</div>
</div>
Css:
.table-row {display: table-row}
.td {display: table-cell; vertical-align: middle;}
NOTE
This will not work with elements that are floated left/right, and it will change how the border width effects the overall width of the element.
I would only use this with tabular data, much like I would suggest only using a table.
if it possible to resize an image, using the CSS3 resize property? I noticed it is for block elements, but is there any workaround or possible solution?
I know I might use the jQuery UI resizable plugin but I would like to apply this CSS3 technique.
Thanks
I don't believe you can use CSS3 resize on images. The documentation states:
Note: The resize property applies to elements whose computed overflow
value is something other than "visible".
You can however, place an image inside of a div that is made the same size as your image and apply the CSS3 resize to that.
<div style="height: 41px; width:114px; resize:both; overflow:hidden;">
<img style="width: 100%; height: 100%;" src="http://www.google.com/logos/2011/curie11-sr.png">
</div>