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.
Related
I have two shape at same position, not same color, and when i click over them, i want to fire click event on both, not just the first.
These two shapes are in the same container.
I have tried getObjectsUnderPoint() under stage.on("mousemove"), but this function increase my FPS (60 to 32~, and inside there are just a console.log), So it's not a good solution.
I tried the bubble, the useCapture, but i think it isn't what i want.
I just want to fire click on all element behind my mouse.
If someone have a solution, please.
There are a few points here:
EaselJS objects sort of work like HTML DOM Elements. If an element has a mouse handler on it it will block objects in other hierarchies below it from receiving the event. This is just how it works. The main difference is that if you don't have mouse events, then they are just ignored (like if you set the pointerEvents on an HTML element to none to have the mouse ignore it).
Your idea with getObjectsUnderPoint is what I would have recommended. Running any hit-test logic on mousemove is going to be expensive (mousemove fires a LOT, which is why we give the ability to throttle the typical mouseover check if you enableMouseOver on the stage).
A few things to optimize it:
Ensure you are using mode=2 on your getObjectsUnderPoint, which will only check objects with mouse listeners. This greatly reduces the overhead in checking. [docs]
Instead of checking the stage on your own mousemove event, set a flag to check it on tick. This throttles it to your Ticker FPS at least. You could also set an interval to check it even less often. It can create a little bit of a visible lag, but you can probably find a nice balance.
Reduce what is checked. If you have a container with your clickable elements in it, you can only check that object for mouse interaction.
If your objects are the exact same, you can also just trigger the click manually on the second item.
obj1.on("click", function(event) {
obj2.dispatchEvent(event);
});
I hope those approaches provide you a solution. Let me know if you have follow-up questions.
Cheers,
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 working a Vue project, and I'm using Vuex to manage the applications state. I've separated out the view of the app into many small layouts, as Vue components. For example I have a layout for a header and a floating stats panel.
I've written a custom directive for affixing the stats panel. Currently, this works similar to Bootstrap where you set a value, and when the page scrolls beyond that point an affix CSS class gets added to the element. This value is based on the height of the header. As app is responsive, I would rather have this value computed from the header outerHeight property.
Now, I can think of several ways on how to accomplish this, however I'm not sure the proper Vue way to do it.
I could listen for resize events and have the header update it's height in the Vuex store. However, it seems poor practice to have the store manage presentation data.
I could pass the id of the header to the affix directive, and use getElementById to check the height. But this is bypassing Vue completely.
I could add a method to the header to return its' height, and have the parent component that holds both the header and stats panel use that to update the affix value. This however, gets messy if header and stats don't share the same parent.
Are there any other options? What would be best practice? Thanks!
I would surely go with #1 - share it through Vuex. Keep in mind that Vuex is just a stage manager. There are no rules what kind of data you want to store. Furthermore, I think it would be best to use it, as more component may rely on this kind of data, and it will be the only source of truth, that is mutated in a predictable way. All other options include coupling components/instances/elements on the page, and therefore the bigger the connection between the height and the page gets, the more complex those connections will grow.
Plus it will be reactive, so just using actions/mutations you will have it updated everywhere, and therefore your page will look responsive.
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
i want my app to be able to track a person when he moves 2 dimensionally upwards. I already have a vertical scroll view, and it works, but when i press a button i want it to track a little stick figure as he walks vertically, how can i control this? i thought of setting the scrollview.contentoffset to a certain position, but it just changes it one time when i want it to change it fluidly. i suppose i could make a timer that updates the contentOffSet every like .001 seconds or something, but i thought there maybe a better way.
Also, while i was searching the UIScrollView's methods, one of them was an isTracking method, which is a boolean, and I'm assuming it returns yes if the scrollview is tracking something, so given that i assume there is a feature in scrollview so that you can track things. Also, if to track things you have to use some other framework thing that would be helpful to know too
THANKYOU FOR ANY HELP!
The property tracking tells if the scroll view is currently tracking the user's movement. So that definitely won't help you out. (See David H's post for a better explanation for what the property indicates.)
However, you could use setContentOffset:animated: and set animated to YES. That results in a smooth transition to the new content offset.
Instead of calculating a reasonable content offset you might find it easier to specify an area that contains the stick figure. If so use scrollRectToVisible:animated:. Obviously animated should be set to YES.
1) don't use contentOffset = x;, use "- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated". Experiment how often you need to send this message, but I'm guessing you can do it no more than 10 times a second and get nice results.
2) isTracking means the user has their finger on the scrollView but has not started dragging it. By testing "isTracking" and "isDragging" you can determine if the user is fiddling with your scrollView or not.