I have a problem with an animation in angular 6. I'm not sure if i'm doing everything right, but i have prepared stackblitz with a part of code of my component.
What I want to achieve is smooth animation when the item appears when *ngIf statment is fulfilled, but now it looks like the states of two children elements placed in crossfade-images component are treated like one element (i'm not sure if my assumptions are correct). But i wanted to do something looking like: on first load first item slides down from the top, after some interval this item should slide down, and in the same time another child of crossfade-images should slide from the top and it should happen in infinite loop
Could you guys check my stackblitz and give me a hand?
Stackblitz
The trouble that you are having is that transform: 'translateY(-100%)' positions the elements and then applies the transform after they are positions. Thus, the way that you have it set up is:
The boxes indicate where the images are positioned, with yellow being the first image and red being the second. What you will want to do is position:absolute your images (with the container being position:relative and transition from bottom: "100%" to top:"100%"
https://angular-gwxfta.stackblitz.io
I have left transformY(-100%) and just added position: relative to parent container, and position: absolute to children divs and it works as I wanted. Thank you so much.
Link to working code on Stackblitz
Related
I'm trying to create a custom carousel. The way it works is that the items are contained in two "piles", both piles contain the same items.
When you click the "next" button, the topmost item from the second pile moves to the top of the first pile. The last item in the first pile will then move to the bottom of the second pile, meaning both piles always contain the same number of items.
When clicking the "prev" button it needs to perform the reverse animation.
When moving items from the second pile to the first, this needs to happen with an animation.
I created a fiddle here https://jsfiddle.net/n109rpp0/3/ with the HTML I have produced so far, but I am struggling to work out a way to do the animation.
I'm not sure if I've taken the right approach, e.g. by having the items duplicated in two ul elements. Also how do I ensure the items are cycled in the correct order?
Does anyone have any ideas on how I should go about this?
Here is a quick idea how to achieve what you want. Add this:
$(prevItem).animate({left: '-345px', top: '-30px', width: '+=50px', height: '+=50px'});
$(prevItem).css('zIndex', '1');
to your next button functionality.
You need to play with the code to make perfect transition.
Here is an updated fiddle
Google animate function for jQuery and you will find more examples
Unfortunaelly question is too long to give me proper results on google or here, all I got is some scaling of svg elements.
What I wanted to do is make online shop, where parent contains results which are div boxes, and size of parent should be relative to number of children.
So lets say I have 14 children divs, 4 per row, than I can use starting min-height:768 px, but if there is lets say 200 children, than I need to increase height of container and containers parent by (200/4-4)*128px, because 4 rows are basic screen and other 46 won't fit in., how I do that dynamicaly, and based on screen resolution?
Edit: I tried to add some details:
IMG of my current status what I want to do atm is increase size of light gray box, its parent (white box) and its parent (almost transparent box) if there is too many red boxes, that leave bound of first container (light gray box)
You shouldn't put static height property to parent of parent of your node.
overflow: scroll;
should work as far as i know.
Maybe you need js solution http://masonry.desandro.com/
Sometimes this i use
Solved it, in case anyone is like me trying to make some complex objects inside objects and than has problems positioning and scaling them all maybe you did something like I did.
Inside container I have positioned every object in middle by making it:
position: absolute; transform: translateX(-50%); and I did like this for like 10 objects, position absolute caused my child divs to leave arent instead of increasing its size, all that I should have done is just add padding of container 5%, because all children had width of 90%, and dont set position for children of containe, just manipulate them with paddings and margins.
I have a grid of elements (3 x 3) formation which toggle visibility on hover, easy.
However my next step is to grow said elements to fill their container when hovered upon, I'm assuming I would need to get current (x,y) values and then grow this to the (x,y) values of the parent container and use css positioning, however every approach I take is hitting a brick wall. I have a fiddle here which demonstrates the layout / intended functionality - http://jsfiddle.net/u2w7J/
Any help would be gratefully appreciated!
The way your HTML is set up currently, this is kind of hard to accomplish while having it look smooth. A first try is to use the .toggleClass function and toggle "box" and "miniBox" for the hovered element. See http://jsfiddle.net/u2w7J/6/ for a demo.
Positioning is harder since the miniBoxes are not positioned absolutely. Hence, adding animation is causing weird results (see above demo).
I would suggest to have the miniBoxes positioned absolutely. When hovering, get the parents div left and top values and animate the miniBox using these values. Additionally, raise z-index during or before the animation to prevent other miniBoxes being visible.
I want to animate between "default" states/positions for a div. For example:
Div absolutely positioned with a class, to be on the left of the screen. Class is removed via JS (or replaced) and position is now relative. The default relative position is actually on the opposite side of the screen. I want to animate this.
Something like a dock, various divs as icons in display-inline, centered horizontally on the dock. If I "delete" one of the icons, the rest will shift a bit to recenter. I want to animate them shifting to fill the gap.
Transition: all does not work (I assume because there was no predefined values for the position) so is this even possible? Are there JS solutions to this?
It's possible exactly the way you described it. Here's a live example of how it's done.
http://jsfiddle.net/nDr4y/3/
You can also remove the transition from css and use jquery to animate the element with pure JS. The syntax looks like this:
// in the object are the css properties you want to animate,
// the second argument is how long you want it to take in ms
$('.el').animate({ left: 100 }, 1000);
You just need to figure out the destination coordinates and set it using jQuery, or whatever framework you use. Other than that, it's totally possible.
http://jsfiddle.net/Kd72u/
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/