so I have a list of tiles and each of those tiles is able to expand a box underneath itself. When you expand this box, all the other tiles beneath should be pushed down and when you close the expandable, move back up. I am achieving this effect by animating the height of the expandable. With the last 10 or sth tiles it works really smooth, but when toggling the very top ones, the animation is not smooth at all, how can I fix this? I am using React and their CSSTransitionGroup.
I haven't seen your code but maybe you should consider toggling className with React and make transition of height with CSS, this would be an elegant way to do that.
Related
I want all the components to blur out beneath the dialog box.
The dialog box should not get blurred out.
I've tried couple of ways but i didnt achieve the desired result.
Tried using filter with pseudo element, it did blur out the background behind dialog but didn't blur the text beneath the background.
*considering that all are different components.
<text/>
<background/> (it blurred its children and itself when i placed dialog inside it but the text didnt blur out).
<dialog/>
I tried changing the order of components. Didnt work.
I have a question regarding how filter actually works? Does it gets applied to only the element i apply it on and its children? Or can I use it as a curtain which will cover everything that is placed below in the stacking order? If so can i change the order of it using z-index to change its stacking order?
Any help will be appreciated. Thanks.
I've got a bunch of elements coming into view on page load from the bottom of the page. So it looks like they're flying in from below and settling in their proper places. Right now what I'm doing is this, having a base class for all the elements like Row, in which I set transition all and position to relative. Then I have another set of classes Starting and Resting. In Starting I just set some position for top like 1000px so it's out of window bounds, then in Resting I set it to 0px and in javascript switch the classes one by one. This works however this seems very backwards, if the user has a 4k monitor or something it would show up, and also the scroll bar shrinks as this goes on since the elements are moving up a page. Is there a more elegant way of doing this?
PS. I understand that there is a work around for each issue I mentioned, like also maybe animating transparency so it's not visible at all on any monitor or setting positions to absolute and reserving the space on page so the scroll bar doesn't go crazy, however I'm not looking for hack like this (unless there is no other way). So what's the most straightforward and elegant design for this?
This answer covers how to use jQuery to accomplish this, but I'd like to avoid that as a) I don't know jQuery and b) my React project doesn't include it.
I have a flexbox container of elements, each of which has a width of either x or 4*x, depending on a boolean variable in state.
When the width changes, the animation is pretty smooth, and it does push other elements as it grows.
But, each time an element reaches the border of the div & wraps to the next row, the animation stutters.
Here's a codepen to illustrate. (it's using React as I'm unsure how to replicate this in vanilla css/html/js)
Is there a way to animate the transition of an element from one line to the next?
i have made in my asp.net applictation a small div container, which is draggable (in this way: Make jQuery-ui draggable handle cover entire page).
I want to make clear, that the normal user knows instinctively, that he/she can drag this container around the page.
I have set the cursor via CSS to cursor: move;.
But with this solution the user only gains the knowledge while moving the mouse over the small container.
How can I make sure, the user knows from the beginning, that this small div is draggable?
You can set this kind of image on div which is draggable. This image will always visible so user can get to know easily this div is draggalbe and of course by the css you can put it center over the div. and image will type of png so it will not look ugly and you can apply transparency that hand image so contant of the div can visible even image is over the div.
and yes there are other suggestion also given by #Prabhavith and #Matt Lowe..you can also work around with that.
The only way I've seen this done that makes any sense to me is to have a faintly written message with the word "Drag" and arrows pointing through the four ordinals centered in the div.
Like the image in the linked question, you can make your draggable div look more like a traditional desktop window. Users are used to dragging around windows that have a title bar across the top and minimize,mazimize, and close buttons, and a border with an optional bevel. Approximating this style will help communicate draggability.
Likewise, having the border around the div grow darker or highlight will help communicate draggability as well.
You can go through this site http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/DragPanel/DragPanel.aspx
I have a bunch of tiles on a page that expand as the user mouses over them. The expanded one should have the highest z-index, and this works, but I need the z-index to remain until the size transition is complete. Is there a way to do this using CSS only, no JavaScript? Since I'm using transitions, I'm not too worried about compatibility here, I applied progressive enhancement correctly.
Here's a jsFiddle that demonstrates this. Mouse over A; it transitions out. Mouse off of it, however, and it falls behind B. I need it to stay in front of B until the transition completes. Is there an elegant way to do this?
You need to define the z-index, as well as animate it.
This works in Firefox (8.0.1) and Webkit.
You need to set z-index to transition too: http://jsfiddle.net/uHJwT/2/
Try using transitions like in http://jsfiddle.net/frozenkoi/YK52N/ (note the comments in the CSS section, for both the .item and .item:hover)
The trick is to use transitions for the z-index property too. You can set, for example, a value of 10 for the normal items and 11 for the hovered ones. You also have to use transition-delay so that the animation for moving the mouse out doesn't reset the z-index inmediately. Next, add a different value to transition-delay to the rule for :hover with a value of zero so that the z-index does update inmediately when the mouse goes into the item.
In short, .item has the transition for mouse out of the item and .item:hover the rules for when the mouse moves in.
Here's the one solution: http://jsfiddle.net/uHJwT/4/
Essentially, it uses another wrapper div that has sufficient width & height to cover animated surface - on hover, it elevates its z-index so that the animated div remains on top. Of course, this is not full-proof solution - it is based on the fact that typical hover off would be down movement and it works for that - but hover off in diagonal direction would not work. But seems to be a reasonable CSS only solution - I would rather used js to get a perfect one.