In the following JSFiddle, the height change is not animated (using the transition property) when it’s being reduced:
https://jsfiddle.net/gcm0Ljrb/
When button A is pressed, the bottom left panel expands from height 0 to its full height. When B is pressed, the panel’s height reduces to a specific amount. Finally, when C is pressed, the panel’s height goes back to 0 (initial state).
I am trying to make all of these height changes animated using the transition property, but only button A’s height update is actually animated.
What could be going wrong here that is preventing the other two buttons from also being animated?
Related
I want a grid of tiles when clicked on single tile it expands and occupies the whole width and auto height and rest of the unclicked cards to animate and hide. when clicked again the grid tile should collapse and take its place in the grid. I am adding css class selected and not-selected to determine.
Desired output would be to animate to parent top and expand full width and height fit to content. when clicked again to animate shrink to original position
Current Output:
The problem is that css width animation is laggy when entering and exiting. Is there a way to do with transform translate or flex transitions
Stackblitz:
https://stackblitz.com/edit/web-platform-81s3a5?file=style.scss
I have a simple animation (via CSS) which brings my content from the bottom of the screen to the top. Margins are set to auto. My problem is that when this animation is coming up,on the right side it appears a scrollbar which persist till the end of the animation. I want to disable this scrollbar till the end of animation because my elements moves to the right for a few pixels after scrollbar disappers (because my margins are set to auto – and i want them to be so).
Thanks for any info!
set body{overflow:hidden;} before the animation and remove it after the animation ends.
I have a group of div box's that will be displayed at different times based on what is clicked. It needed to be animated to slide down. For this, I change the height of the each div at a certain time, then the CSS3 Transition takes over and eases it down.
Now at the moment, if I provide the height for the box to change to, it works fine, but I can't always provide that as the content is dynamic and may be however tall. But when I define auto as the height, then the transition takes it up to 0, then sizes to the content. How can I get it to instead of slide to 0, slide to the height of the div based on the content?
sadly after much searching, found out that its not possible to do it to auto, but my solution was to find the inner element (the p element which was changing) and used the clientHeight added with any other constant's and used that as the defined new height. Bit busy, but it works nicely.
I'm having issues with implementing a flex button component:
I have applied a CSS style to button and set border-color to, say #555555.
So far, it works as expected.
Then, when my application is resized, the border of the button component becomes blurred and its width automatically changes from 1 pixel to 2 pixels, which doesn't look very well..
When I maximize the app again, after the border is blurred, the buttons' border becomes 1 pixel and looks nice.
The shift from 1px to 2px to 1px also happens when I slowly increase or decrease the width of the application.
What's causing this issue?
i have found the mistake,
this is because if the container which contains the buttons have the x,y position in float that sets the buttons relative position in float values that is not round of automatically in flex 3.2 so the drawing of buttons looks blurred as i tries do draw the button on two pixel i.e. in case of x= 3.3 the button will have the drawing on 3 and 4 pixel . by simply rounding off this value solves the problem.
NOTE : in case of graphics.drawing method this problem is avoided automatically.
What I'm trying to do is fairly complex.
The basic idea is that I have a wrapper div, say 20 x 20 px, that is hidden and fades in once I hover the mouse over it and fades back out when the mouse is removed. I have this part figured out.
My next step was to include a div containing an image inside the wrapper div. The image div which is bigger (about 300 x 400px), overflows the boundaries of the wrapper div so that the entire image is visible and, as a child of the wrapper div, also fades in upon hover.
This brings me to my issue(s):
1. When I hover over the area, the image fades in like I want it to, but the top right corner is bound by the wrapper border, and it overflows to the bottom left only.
2. When I hover over any area the image covers and not just the wrapper area, the image will appear.
desired result for issue 1: I want to position the image div within the wrapper so that it overflows up and left, as well as down and right. In other words when I hover over the wrapper area, I want the image to fade in completely eclipsing the wrapper area so that the wrapper area is basically centered within the image area
Desired result for issue 2: I ONLY want the fade in effect to be activated when I hover over the 20 x 20 wrapper area. When I hover over any area the 300 x 400 image WOULD cover when visible I don't want anything to happen. On mouse off It wouldn't matter to me if I had to leave the area of the image or the area of the wrapper for the fade out to begin, but if it's possible to limit all hover activation/deactivation to the 20 x 20 area only, that would be cool.
I could so easily use the old image1 over image2; on hover, image 1 fades out to reveal image 2 trick, but it's all hell since I want the fade activation location to be within the area being faded itself.
Isk
UPDATE:
I have figured out issue number 1.
so now I just need to figure out my second problem and I'll be all set.
To get a visual of my progress so far, here's my website: http://silentnoizemusic.com
Scroll down to the area with the billboard that reads "SALES#silentnoizemusic.com" and hover the mouse over the black twitter icon to the upper left of the billboard.
Just as a reminder, I want the fade in action to take place ONLY when I hover the mouse over the twitter Icon area and not when I hover over the area the fading image covers. The image is placed within a smaller div wrapper set to visible overflow. So if you were to set the overflow to hidden you'd see that there is a square area with a yellow border that fades in when you hover over the twitter Icon. When I set the wrapper back to overflow: visible;, I only want that square area to activate the hover function and not any of the area around the square that the invisible overflowing content occupies.
It would be preferable if there was non-javascript solution due to coding restrictions, but if js is the only option then I'll give it a try anyway.
Thanks again,
Isk
This problem is occurring because your image is a child of the wrapper div and hovering over it is considered as hovering over the wrapper div.
If you are not terribly against a Javascript solution, here's my suggestion:
Take the bigger image outside the small wrapper div, i.e. it's no longer a child. But position the wrapper and this image in the same places as before. Then, on an onmouseover event on the smaller div, change the visibility of the image as before. On an onmouseout event, hide the bigger image again.
In order to change the properties of an element in response to actions on some other element you would need Javascript and CSS won't do.
This is the HTML and JS. Put the whole thing in your HTML file:
<script>
function show(div-id)
{
document.getElementById(div-id).style.visibility="visible";
}
function hide(div-id)
{
document.getElementById(div-id).style.visibility="hidden";
}
</script>
<div id="small-button" onmouseover="show('bigger-image')" onmouseout="hide('bigger-image')">...</div>
<div id="bigger-image" style="visibility:hidden">...</div>