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
Related
I'm building a notes taking Vue app.
The note being edited is auto-saved every X secods.
Every time it auto saves, I want to show a small message on the bottom of the screen saying "Note Saved". This will fade in stay for 2 seconds and then fade out automatically.
I've done transitions in Vue before but not on-off transitions like this.
I can set a property linked to the element with v-if wrapped in a transition block. But then I need to change the property twice (true-false)? Would I need to set up a timer to wait the transition to be over before setting it to false again? Seems a bit hackish. What's the best way to approach this?
I think what you've described with v-if makes sense... you could change the property (or data) in a v-on:enter method on the related component. This would nicely isolate the behavior to the component and be pretty apparent to future-self.
A completely different approach would be defining a single animation with keyframes that transitions from hidden to display to hidden, but that might be somewhat confusing: what is the leave transition of an element with such an enter transition? Hmm.
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 am new to eclipse plugin development. With the given sample of "Plugin with a view", the view is creating successfully. But this view can be made to move at any corner and the size of it keeps on changing. How could i make it to appear always on right with a fixed width & height.
I think you'll need to use a Perspective for this, at least that is what I've done in my plugin.
Create a perspective implementing IPerspectiveFactory (extension point org.eclipse.ui.perspectiveExtensions) and you can design an initial layout defining where a view opens as well as its width/hight.
You can use this link as a rough guide.
I know the title is a little confusing, but the best way to describe what I'm after is by running the Weather metro app on the Consumer Preview; as you scroll horizontally, you'll note that the section headings kind of move around and stay on top of the relevant content, and then fade out as you cross over into a new section. (The main background for the first section also kind of does this)
My question is, how would I go about replicating this behavior in a WinRT app of my own? Are there any existing controls I can leverage or would I have to essentially rewrite it all?
This looks just like a ScrollViewer - you would handle the ViewChanged event and depending on the scroll offset - change the opacity of overlaid static TextBlocks and completely hide the ones that scroll once you cross specific tresholds. I don't think there is anything like that that does it, but I can build it.
I can make a single row IKImageBrowserView by setting the
[imageBrowser setContentResizingMask:NSViewWidthSizable];
but in this case while i drag an image inside image browser to rearrange it, the drop place highlights with horizontal line(vertical line expected).
how can this be changed?
Many thanks.
There is no defined way to do what you want.
You may be better off writing your own custom view where you can control every detail of how things are drawn. In general, Apple's controls are "as-is" and unless they provide an explicit way to control behavior or mention that you can custom an object in some way, don't count on being able to do it easily (if at all).
I would also suggest heading to http://bugreport.apple.com and making the enhancement request - it would be best if you attached a sample application demonstrating the behavior.
EDIT: You could also try out the NSCollectionView to see if it might work for you.