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?
Related
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;
React keys are not working.
If I swap the position of two react elements (item0 and item1) positioned with transform transform: translate(); a css transition is triggered, only if the elements were rendered in the same order.
If I change the order of the render (position swap still the same but now item0 renders after item1), the css transition is not triggered.
It looks like react is deleting the DOM element and recreating it, even if they have React keys set.
Here is a simple JSfiddle with the problem.
https://jsfiddle.net/santiagopuentep/vvpezbp9/2/
Here is a written explanation:
Two React elements (item0 and item1) positioned with transform: translate(); in css and with a css transition active for that transform.
The app renders a list of items using a layout.
The first layout is:
item0 at translate(0px,0px); and item1 at translate(0px,50px);.
The second layout with the same items but with positions flipped:
item0 at translate(0px,50px); and item1 at translate(0px,0px);.
Clicking on any of the two items changed the layout back and forth from the two, swapping their positions and thus triggering the css transition for the position change.
This works just fine, the transitions trigger correctly.
The problem happens if the second layout makes the item1 render after item0 (only change in render order, css translate positions still swapped), the transition for the second element is lost.
This looks like React is deleting the element instead of just reordering it, even if I have keys set.
Please help!
Thank you very much! I confirm this issue, so workaround is:
lastOrder = []
render() {
let cards=this.props.cardList
// HERE I RESORT NEW LIST LIKE PREVIOUS IT
if (this.lastOrder.length) cards.sort((a, b) =>
(this.lastOrder.indexOf(a.id) - this.lastOrder.indexOf(b.id)))
// AND SAVE LAST ORDER
this.lastOrder = cards.map(card => card.id)
return <div className='board'>
{cards.map(card => <Card key={card.id} {...card} />)}
</div>
}
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.
With the following rules:
.container[data-direction="reverse"] .pane[style*="display: none"]{
animation:SlideOutToRight 1s ease;
}
.container[data-direction="forward"] .pane[style*="display: none"]{
animation:SlideOutToLeft 1s ease;
}
The animation runs whenever (a) the data-direction attribute changes and (b) whenever the style becomes display:none. How can I change this code so that the animation only runs when the style becomes display:none but not when the data-direction attribute changes?
Right now, when the direction changes, all of the containers go flying across the screen to the other side because the animation gets applied to all of them when the data attribute changes value.
The data-direction attribute should only control which animation plays, but changes to it's value should not trigger the animation. Is this possible?
Update:
Here is a fiddle of the problem: https://jsfiddle.net/j6ytzbh6/
Expected behavior: The forward button should cause the next sequential box to enter from the right hand side while the current box exists left. The backward button should cause the previous sequential box to enter from the left while the current box exits right. No other box should move or cross the view-port when its not it's turn to move.
Reminder: This is a CSS question, so doing the animation in javascript is cheating. The idea is that Javascript controls functionality (ie a box should be shown or hidden) while css controls presentation (ie. do we make it disappear, fade out or fly to the side). You shouldn't have to re-write your plugin to change the visual way things get shown or hidden.
I'd like to show a modal dialog using a 3D flip effect, exactly like the "3D flip (horizontal)" example in the Effeckt.css library.
However I really don't need the whole Effeckt library, since I just want this one effect. So I've tried to strip out the relevant bits of the library into free-standing CSS and JavaScript.
This is my attempt, but it's not working: http://jsfiddle.net/eJsZx/
As the JSFiddle demonstrates, it's only showing the overlap - not the modal itself. This is odd, because the element inspector suggests that the modal should be visible - it has display: block, visibility: visible and zindex: 2000 (higher than the overlay element).
This is the JavaScript:
$('button').on('click', function() {
$("#effeckt-modal-wrap").show();
$("#effeckt-modal-wrap").addClass('md-effect-8');
$("#effeckt-modal-wrap").addClass("effeckt-show");
$('#effeckt-overlay').addClass("effeckt-show");
$(".effeckt-modal-close, .effeckt-overlay").on("click", function() {
$("#effeckt-modal-wrap").fadeOut();
$('#effeckt-modal-wrap').removeClass("effeckt-show");
$("#effeckt-modal-wrap").removeClass('md-effect-8');
$('#effeckt-overlay').removeClass("effeckt-show");
});
});
What am I doing wrong?
There were a couple of issues in the code.
First, your styles were missing the following:
.effeckt-show .effeckt-modal {
visibility: visible;
}
This was causing the modal to remain invisible.
Once the dialog was visible, the dialog would rotate in just fine, however when being dismissed it would not rotate out. This was due to the following line:
$("#effeckt-modal-wrap").removeClass('md-effect-8');
If you want to remove this class, it would need to be done after the animation is complete otherwise the 3d effect is lost. It doesn't necessarily need to be removed, but that depends on what the rest of your content needs.
The final issue was that the wrapper, on completion of the fadeout, was getting its local style set to display: none. Because of this, the second time showing the dialog would cause it to simply appear because it was moving from display: none to display: block. There are a couple of options here.
Use CSS to animate the fade in/out.
Use window.setTimeout after calling $.show on the element to give the dom a chance to update.
The final result: Working Fiddle