I have the following project: https://codesandbox.io/s/vue-template-c1rj1
I expect the image to just come up from the bottom of the screen already being in the middle of the page, but it first comes up from the bottom and then moves to the center of the page. I noticed that setting the width of the notification-box class to 100% fixes it but I am not exactly sure why.
The reason this is not working is because the fixed css property positions an element relative to the parent layer. Usually this is the viewport.
However, the transition property creates a new layer for the the Element it is used on. In your case, Vue applies the transition property during the animation - making the notification-box the next parent-layer (with a width of 0).
Positioning your Image 50% (of 0) left, does not do anything.
Once the animation is over, the transition property disappears, making the viewport once again the next parent layer. Now 50% left (of the viewport) gives you the desired result.
Related
What is the most reliable way to get the absolute position on screen of any element?
I have the problem that when an element above (parent) is added with my methods I can not get the absolute position of an element.
Context: I need to get the absolute position on screen of an element to check if my element which follows the finger (animation made with reanimated) intersects with that element which I can not get the absolute position from.
Methods I have tried:
event.target.measure
Here is the problem that I have a swipe element over the "drop box" and it just produces false positions.
ref.current.measure
This one works but not reliable. It fires about ten times in useEffect and produces only once the correct position.
Are there other things I can try which are reliable?
I do not understand why it is so hard to get the absolute position on screen not relative to the parent.
I am not sure how your code is connected, and not sure if you want to make this feature in hacky way but you can get the absolute position of the element from on layout property https://reactnative.dev/docs/view#onlayout
I am using Cytoscape Dagre extension to show hierarchical graph from left to right. It has 14 children and one parent 1 and main parent. I am calculating the height of the container using the number of nodes. Then I am calling fit function after the layout is created but it is not working.
I have added a fit button and if I click on it after the graph is loaded, it works then. What am I doing wrong? I would like fit function to be called after the graph is initialzed.
Here is the stackblitz link: https://stackblitz.com/edit/dagre-childrenconnected-fit?file=src%2Fapp%2Fapp.component.ts
You can try clicking on Fit and see the graph is fitted properly if you click on fit button but it does not work if you refresh the page.
Your code is not working correctly, there are some errors.
(1) Firstly, your "dynamic height" [ngStyle]="{'height': heightTest + 'px'}" is undefined at graph init and runs into a weird error after that. Just use something like [ngStyle]="{'height': '100vh'}" and go from there.
(2) As the docs say:
If your code resizes the graph’s dimensions or position (i.e. by changing the style of the HTML DOM element that holds the graph, or by changing the DOM element’s position in the DOM tree), you will want to call cy.resize() to have the graph resize and redraw itself.
Your approach is not really ideal, I'd suggest just changing the height of your container and then resizing/fitting your graph:
let container = document.getElementById("cy");
// just some random height depending on the number of nodes
container.style.height = `${this.cy.nodes().length * 40}px`;
this.cy.resize();
this.cy.fit();
Here is the edited StackBlitz: link
I have a paper-dialog-scrollable which is filled with a dom-repeat from a firebase-query. Everything works fine, except paper-dialog-scrollable doesn't scroll to the bottom when firebase adds an entry to the array.
I managed to set a callback whenever the array gets a new entry (basically with an observer on the spliced array, not on the array).
So how do I instruct paper-dialog-scrollable to scroll to bottom from that callback ?
I saw solutions here which don't seem to work.
Thanks for any insight.
As suggested in the link you provided, give the paper-dialog-scrollable some id (e.g pds) and then add the following code:
this.$.pds.$.scrollable.scrollTop = this.$.pds.$.scrollable.scrollHeight;
An element's scrollTop value is a measurement of the distance from the
element's top to its topmost visible content. When an element's
content does not generate a vertical scrollbar, then its scrollTop
value is 0. Learn more about scrollTop.
The element's scrollHeight read-only property is a measurement of
the height of an element's content, including content not visible on
the screen due to overflow. Learn more about scrollHeight.
I have made a demo here: https://plnkr.co/edit/JIZEdd6NoBBnwndbQuFA?p=preview.
I have a site where I use TimelineLite paused and manually progress the timeline with a scrollbar.
I also have 5 pauses littered throughout the timeline so that I can click a button and watch one 'scene' of the timeline.
Each animation scene basically tweens offscreen at the top while the next element tweens into the screen from the bottom.
Everything works fine.
However when I resize the browser, I notice that the tweens of the timeline are still animating from the old values.
My timeline consists of TweenLite.to(...) tweens. For example if my browser height is 700 pixels and I tween scene 1 out of view and scene 2 into view, when I resize and use timeline.reverse();, I see scene 2 tween back to 700 pixels. (Scene 2 is absolutely positioned with translateY set to 100%) However since my tween is using y: '100%' I would expect it to reverse to 100% not this old pre resize value of 700 pixels.
Oddly enough, scene 1, which was originally at 0,0 and tweened to 0,-100%, still tweens to a percent value so that one looks ok.
So I find it really odd that scene 2 is tweening in pixels when I set a percent value and scene 1 tweens in percent.
Whats going on and how do I prevent this pixel value from caching in my tween?
I've already tried invalidate(), kill(), clear() and then setting the timeline to null, followed by reinserting new tweens on a new timeline but somehow those tween values still exist.
I'm at a loss. Any help would be greatly appreciated.
I think what you should be using is yPercent for animating your tweens instead of absolute pixel values or instead of simply animating the y property.
What yPercent (and xPercent) do is that they will always align your element regardless on the screen size, hence responsive, based on the value that you provide.
Here is an example made by the GSAP guys themselves which, by the looks of it and by what I was able to understand from your question, is actually very close to your own situation as well.
There is also a video tutorial by Petr Tichy who explains the differences between using x and xPercent.
P.S. Can you share this website you are working on or, prepare a fiddle or a codepen isolating the problem? This would help us in proposing an accurate solution.
Answering my own question since no correct answer exists. GSAP saves any tween data on the actual DOM element. Despite me setting the timeline or tweens to null, it had no effect because as I was tweening the same element, it would check the DOM element if it had the variables GSAP had saved prior.
To fix this I had to manually reset the DOM element variable.
If this is a problem for you, check the ._gsTransform variable on the element. You will see some x, y values that you can manually set to 0 or whatever else you need to set it to.
Imagine a small red box (CALayer instance) drawn in the lower left corner of its parent layer (which is the root layer of a layer hosting NSView).
When the frame of the parent view changes, the red box should remain at the same position on the screen. I do this by adjusting it's position relative to the lower left corner of the parent view .
The problem is that in some cases there is flickering and I can see the red box layer being drawn in the lower left corner of the extended frame before it is shown at the correct position.
I assumed that wrapping the frame and position change into one CATransaction would make both changes together, but that doesn't always work (the docs say that by using a transaction the animations will start at the same time, but there still seems to be a race condition at times).
How can I adjust the frame of the parent NSView while keeping the child layer at its perceived position?
Example and code:
My own ideas:
Hide red box layer, update the position, show it again
Use constraints to bind it to the right corner. Problem is that this offset could also change and I would have to update the constraint which could lead to the same flickering issue.
Try deleting the code you have already made to have the layer move with the view and put this where you are creating the layer.
boxLayer.autoresizingMask = kCALayerMaxXMargin | kCALayerMinYMargin;