I am moving some element from (browser height + element height)px towards the top of the browser at -50px of the browser using CSS keyframes and that works but the problem is it's lagging and I am well aware that using translateY would resolve this issue.
Now assume I have a CSS as follows.
.bubble
{
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.bubble.move
{
-webkit-transform: translateY(-50px);
}
As the element is below the browser screen (browser height + element height)px and I want it to move at the top of the screen at -50px, that doesn't work. It just moves the element from its current position to the -50px of that current position which is not intended. How can I ask transitions to go at -50px of the browser and not he element?
Translate isn't what you're looking for. You want to position the element absolutely and put the transition on the top property. Something like:
.bubble {
position:absolute;
top:100%;
transition:top 1s ease-in-out;
}
.bubble.move {
top:50px;
}
Only bad part about this approach is that the body will need to be the relative parent of the .bubble. I left out vendor prefixes because I hate them.
Have you tried positioning the element absolutely instead of relatively?
Use javascript to calculate it and set the css using javascript too
Related
I am using css transitions to lay out a bunch of divs on top of each other. At any point, one of the divs may collapse. And all of the divs below it are supposed to move up to fill its spot.
Here is a codepen that describes the situation.
The css I am using is the following:
div {
height: 100px;
width: 100px;
margin: 15px;
}
.top {
background-color: red;
transform-origin: top;
animation: move 2s infinite;
}
.bottom {
background-color: blue;
}
#keyframes move {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(90deg);
}
}
With this, the top div will expand and contract. I want the divs below it to move up as the top one collapses.
If I switch transform for height, like this:
#keyframes move {
0% {
height 0;
}
50% {
height: 100px;
}
}
The bottom divs do move, but this is not a good solution for me because in the actual application, each div has a dynamically calculated size.
How can the bottom divs move smoothly with the top div?
With transform you won't be able to do that, as when an element is transformed, the surrounding elements won't see any change in the DOM, as DOM-wise nothing have happened.
What you can do to optimize it all, is to prepare the browser that the height will change, with the property will-change: height
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
This new CSS property aim's to do what transform does, make smoother and more optimized animations.
Do note though:
will-change is intended to be used as a last resort, in
order to try to deal with existing performance problems. It should not
be used to anticipate performance problems.
Another possible solution (read hack), is to trick the browser to use GPU instead of CPU, shown in this answer (see its p.1):
CSS `will-change` - how to use it, how it works
Updated
In case of the height is auto, or similar, this will work with the max-height trick, and here is a couple of answers of mine, showing how-to:
CSS Animation on max-height change
Can't use the same animation in reverse for class toggle
CSS transition auto width
And the last resort, if none of the above is applicable, is to use a small script and either create a styles dynamically (links below), or set them inline.
Dynamically styling pseudo-elements using jQuery or Javascript
How to prevent css from getting converted to inline css
I am currently building a css transition for an expandable component.
Now I add a scale(Y) transform on the element when opening (scale 0 > 1) or reverse the animation on close:
/*
* Animation: Slide In from Top
*/
.u-slide-from-top-enter-active,
.u-slide-from-top-leave-active {
transition-duration: $s-animation-duration-default;
transition-property: transform, opacity;
transform-origin: top;
overflow: hidden;
}
.u-slide-from-top-enter,
.u-slide-from-top-leave-to {
transform: scaleY(0);
opacity: 0;
}
.u-slide-from-top-enter-to,
.u-slide-from-top-leave {
transform: scaleY(1);
opacity: 1;
}
This works all great, but Now the element below in the flow in the DOM jumps from one position to the other.
I first thought I could animate the height, but this does not work, then I thought I could animate the max-height, but this would not work with a value of max-height: auto.
So my question:
If I open the the expandable, can I somehow add some transition classes to the following elements in the DOM to transition their position (although I don't set a position property explicitely.
I find some help here:
https://css-tricks.com/using-css-transitions-auto-dimensions/
But I don't want to use Javascript. If you see the javascript example you see the wanted behaviour, but I want it to make with css.
Thanks for inputs on that.
Cheers
I try to make a mobile menu: http://animesector.budi.upperyard.de/
You can see at the top Header Bar 2 Menu Buttons.
The right one give the Content area transform(translateX(-200px));
The left one give the Content area transform: translateX(200px);
The Negative (-) value dont create a Scrollbar horizontal Scrollbar...
But the Positive one does. have anyone any solution for this problem?
I tried to give the div around a overflow: hidden; but this didn't work for me.
You can prevent the horizontal scrollbar with overflow-x: hidden in the body element. Tried it right in the browser with dev tools and worked perfectly.
I had exactly the same issue. In the end I avoided the menu getting scrolled off the screen using translateX - I used the scale transform instead.
Your site is not visible anymore, but probably this is what you did to make the menu visible by transitioning:
translateX(-200px) -> translateX(0)
I used the scale to achieve somewhat similar transform:
scale(0,1) -> scale(1,1)
.menu {
transition: transform 150ms ease-in-out;
transform-origin: top right;
transform: scale(0,1);
}
.menu.open {
transform: scale(1,1);
}
Yes, there is a difference in the animation but it's probably not even recognised by most users if it happens fast.
No overflow manipulation needed.
-webkit-transform: perspective(500) rotateY(13deg);
-webkit-transform-origin: 0% 45%;
DIV is left side position.
i just want to know how to place it right side(opposite)?
The code you provided will produce something that behaves like this JSFiddle.
Typically, the CSS3 transform property is used to rotate, scale, are move an element about a point. To move an element to the right of the page, like what I think you are describing, you should just simply float the element to the right or use the margin property instead.
div {
float: right;
}
This source discusses all the various CSS3 transform functions. The most common are:
translate(x,y)
scale(x,y)
rotate(angle)
skew(x-angle,y-angle)
These would not 'move' an element to the right side of the page like you are describing.
okey, simple css flip
.container
.flipper.A
.front
.back
.flipper.B
.front
.back
it's important for me, that .front and .back both have negative top and left absolute position
and .flipper dimensions is 0x0
when flipper A is rotatedY 180deg, so .back is visible, it incorrectly interacts with other .flippers if their positions intersect. For example, i click on links in flipper B, but can't click on links in flipper A, if A is over B
working example is here http://jsfiddle.net/attenzione/g2at2/ - you almost can click on test 1, instead click on test 3
such situation only appear on webkit browser
any help with it? is this webkit bug?
Just bring the div that you want to be in front towards the front (in 3d space)
CSS
div.flipped {
-webkit-transform: rotateY(180deg) translateZ(-1px);
z-index: 2;
}
the translateZ moves it towards you
corrected fiddle
Is there a reason why your inner .block has absolute positioning? This is what is causing the issue. If you must use absolute positioning on the inner block then there are two ways round this.
You could overflow hidden the outer element (.flipper)
Or you could add pointer-events:none on the unflipped element, bear in mind this only works back to IE9
You should really try not to use absolute positioning though as it isn't needed.