I have an image carousel that you can scroll through with a 'next' and 'prev' button. The buttons are setting the positions state. The positions state is passed to the styled component and serves as an array of "transform: rotateY" properties of the child elements. A snippet with relevant code can be found here: https://codesandbox.io/s/hardcore-microservice-eylul?file=/src/App.js
My goal is to make the transitions of the images in the carousel smooth when the next and prev buttons are clicked.
Add the transition to your CarouselCell styled component :
transition: all 1s;
Related
There are a couple examples of how to create a ripple effect in TailwindCSS for click:
https://tailwind-elements.com/docs/standard/methods/ripple/#!
https://codepen.io/vituja1/pen/oNWzNwq
And basically it's about creating an element that grows inside the boundary of the parent button and vanishes.
targetElement.addEventListener('click', e => {
// create an element, append it to the target, let it grow, and then remove it
});
However, I want to create the ripple that acts on hover, not on click. As you can see here:
https://www.templatemonsterpreview.com/demo/187467.html
How can we achieve this effect in tailwind?
So I have this code :
https://codesandbox.io/s/beautiful-driscoll-jvvvvs?file=/src/Picker.tsx
And I am trying to create a slide-down animation on click of the Selector but it doesn't work , however if you were to add an opacity and corresponding transition for example it works perfectly fine. Some suggestions? ( tried with both height , max-height , even display none ? 0.o )
The thing is you can't display DOM nodes and transition them in the same frame.
If you'd want to animate anything, you should render the DOM nodes first, and then trigger the animation/transition.
Or you can render the DOM nodes at all times, and then just animate them.
If edited your Example to always render the DOM elements and just trigger the animation (you can also remove the opacity transition if you want to, or delay the opacity transition by using the transition delay). If you want me to elaborate more about how to remove the transition effect, leave a comment :)
https://codesandbox.io/s/zealous-cache-lb6yd9
I have navbar
and I wrote the navbar in src/app.component.html
I am using router-link for the page to swap components
for every component I have a different background
if I am using background-image for a component it will not display in the whole page
only in the router-link that is under the navbar
what is the best method to do it?
I thought maybe I should an empty div and set it to display absolute and make the background-image width and height for fullscreen
Basic Solution:
Create an app.service
Create a BehaviourSubject in the service with the default bg image path as initial.
Subscribe to that BehaviorSubject value in the app.component and set the background-image path from this value, you can use the ngStyle directive for this.
ngOnInit of every single navigation component, fire its own bg image path via BehaviorSubject from the app.service.
Working stackblitz example
I am using materialize-css library in angular. Along with the materialize-css I am using materialize-stepper library that is based on the materialize-css.
MaterializeCSS uses .waves-effect CSS class to provide ripple effect on buttons, a tag and on all other clickables.
materialize-stepper also uses the .waves-effect. When I click on the node with .waves-effect class it appends a div having the ripple effect. Problem is on the next click it adds one new div with ripple effect. So it makes the clickable button or node with dark background (step 2) as this does not remove existing div.
what could be the possible issue?
I have the following animation code attached to my component
animations:[
trigger('slide', [
state('show', style({
height: '*'
})),
state('hide', style({
position: 'relative',
height: 0,
overflow: 'hidden'
})),
transition('show <=> hide',animate('130ms ease-out'))
])
]
This is quite hard to explain, (and I can't seem to get animations to work on plunker) but here goes.
The current functionality is as follows:
User clicks a button to display table.
Table smoothly slides into view from below a div.
User click button again.
Table smoothly slides out of the view up into the div.
The desired functionality is as follows:
User clicks a button to display table.
Table smoothly slides into view from below a div.
More rows are added to table (could be a large number of rows)
Animation handles the new table height and instead of just instantly being displayed there is a smoothing animation to gradually move to the new height.
User Clicks button.
Table slides back up under div again.
Edit: here is a plunker demo. You can see when you add/remove rows from the table the animation does not smoothly move to the new height.
The problem is caused because if you are in true state and rows are added.
The animation will not transition to true again, because it is already in true state.
So how will I trigger a transition to the "newHeight" state when items are added?
I made a quick, rough, animation example using angular animations API:
https://embed.plnkr.co/7qWuHmbFFie4p8Y9h53T/
I would play around with that plnkr until you get the animations right. You can hide the element behind something by either removing the table entirely after animating it down by toggling the animation with an *ngIf in your template, or do it the way I show in the plnkr, but toggle the visibility of the table after the animation is complete. I prefer the *ngIf way.
For individual rows being added or removed:
I would add an #animation to every row of the table and enable the up animation if the number of rows increases, or down if it decreases.