I've got theme transitions (entrance and content with a set offset) on elements which overlap. The issue is as theme transitions are bought to the front of the page the elements which are animated unreliably overlap each other causing a nasty transition when it is returned to the correct z-index.
It doesn't seem to matter how the elements are structured in the visual tree or the z-index applied to the element, the issue still occurs.
Any help very much appreciated - Ideally I want to avoid writing storyboards though, I'm happy with the entrance/content transition in this scenario!
I ran into a similar problem myself. Here are some things you can try:
make sure the "correct" z-order observed at the end of the animation is indeed correct. Putting some label on your items should make that clear if the items have the z-order you intended
make sure the items are are added to the control according to their z-order. In case you use binding make sure the items you add to the collection are arranged by their z-index
in case you are using PrepareContainerForItemOverride make sure the logic around your binding is correct
Hope it helps,
Mihai
I decided simular problems with:
Position: Relative;
Transition: All... (All includes Z-Index)
I made Z-Index:4 and for "HOVERed" elements Z-Index:2000.
Related
I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up.
This is kind of expected per the docs:
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen
Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?
Note that without fade the problem is still obvious:
Pen of my issue: click the switch data button to see the issue.
Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:
list-leave-active {
display: none;
}
Resulting Pen
A css fix may be to wrap the contents within a box of some height and set overflow hidden.
So, even when new elements co-exist the jump in scrollbar can be avoided.
I'm having a problem with Isotope.
Everything seems to work except that, when I filter the items, these are resized in a weird way, as if the items were resized relative to their old width instead of the container width.
I let you see by yourself here : https://codepen.io/anon/pen/RLPbpd (Click on the group of red buttons to see).
I tried to layout after each filter :
$iso.isotope('layout');
and to destroy isotope and then re-init, but nothing solved it.
My .grid-sizer is at the perfect size and all items have the same width..
I really don't know what could be wrong there, so I'd be very thankful if you could help me !
Sorry for my bad English, it's not my main language !
Problem solved.
The problem was due to
fitWidth: true,
in the initialization code of Isotope.
I just removed it and it works.
I have a couple of ListViews on different pages in my UWP application. For some reason, one of them seems to have Padding along the bottom below the last ListViewItem, while the other does not.
Neither of them has bottom Padding specified, so I'm wondering if this could be inherited from a parent control? I searched the entire XAML of the one with Padding, and it is not set anywhere else either. It isn't a huge problem, but I would prefer my controls to be consistent throughout my application, and I think adding the bottom Padding to the ListView without it to make them match seems silly, especially when I am unsure of why the first one has Padding in the first place.
Is there somewhere to determine where properties are set in the hierarchy, similar to the way CSS works?
Here is what they look like:
No padding:
Padding:
I added a Background to the ListView control to verify that there is no Padding there..
So it would seem it would have to come from the ListViewItem itself, but it does not have the Padding property set.
The issue turned out to be that one of the parent controls of the ListView that was displaying correctly (how I wanted it to) had a VerticalAlignment="Top" set, while all the parents of the other ListView were set to VerticalAlignment="Stretch".
I was finally able to get XAML Spy working properly, and it was helpful in previewing the changes while the application was running so that I could determine which element I needed to set the VerticalAlignment on without recompiling over and over again. Thanks to #ChrisW for the recommendation.
I've figured out how to create an Overlay, center it, and set it's bodyContent to be an existing from my page. So far so good - now I want to make the transition happen smoothly over 1 full second instead of instantaneously.
The examples I've seen indicate that one must know the initial and final positions, but in this case, I don't know them, since I'm just saying:
overlay.set('bodyContent', Y.one('#node'));
overlay.set('centered', true)
I've created a jsbin at http://jsbin.com/ovuxan/5/edit that shows the issue.. (my transition is whacky to say the least) and would appreciate some help in making it smoother.
You can use the WidgetAnim plugin to do this for you. It can be cleaner since the animations are stored in the plugin and invoked by the widget's hide/show functions.
I have quickly used the plugin to animate your overlay here: http://jsbin.com/ohafec/1/edit
Helpful links:
Overlay: Animation Plugin (YUI Blog)
Plugin.WidgetAnim Class
This one has me stumped. I've used Flexslider with no issues many times, but with a site I'm building now it just refuses to work properly.
The last slide will show on load and stay visible until it has cycled through all of them, at which point things will start working properly.
I've tried all sorts of things, reducing it down, but can;t seem to figure it out. The only thing that changes this behavior is if I change the animation to slide instead of fade. But I definitely want fade. And I definitely want to figure out why this is happening.
It seems like it could be a CSS issue, but I can't find it.
Here is what I am working on:
http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/
EDIT:
I made a couple of super reduced test cases, with just basic HTML, the Flexslider CSS/JS, and jQuery being loaded, nothing else, and the bug persists.
With fade animation, has the bug:
http://www.coppercityinn.com.php53-4.dfw1-2.websitetestlink.com/wp-content/themes/coppercity/test-fade.html
EDIT 2
I am an idiot. I changed the class name of the container from "flexslider" to "hero", but did not update the flexslider.css to reflect that. [sigh]
Thanks for looking.
user1910673 got it right!
the following CSS..
.slides li {display:none}
..fixed my fading issue!
I wish I could upvote but don't have 15 reputation.
I had this problem but it was not to do with my css. I found this article helpful:
http://processwire.com/talk/topic/2283-solving-the-annoying-flexslider-fade-delay/
It says to set "slideToStart" to your last slide. ie. If you have 7 slides then start it at 6. this fixed my problem.
It is not an ideal fix but it worked for my purposes.
EDIT:
Sorry, better fix was making sure that my slides had display:none
Then it doesn't matter what slide you start on.
so turns out it was my css.