I try to put a simple transition on an after pseudo element in Tailwind.
The css is:
.button::after {
transition: 0.5s all ease
}
I tried:
class="after:transition after:ease after:duration-500"
But nothing. I see that after:ease doesn't work, but how do I go about this?
Thanks so much!
You have added only ease as the class. But tailwind have no class named ease. So you have to update your class ease with one of the following classes:
ease-in
ease-out
ease-in-out
ease-linear
For more information please refer to Official Tailwind Docs
Define transition, duration and ease (-in,out, etc.) Take a look to this class:
<div
class="transition-opacity
duration-500
ease-out opacity-100 hover:opacity-0
bg-black text-white font-bold p-10 px-4 h-screen">
Bye Bye
</div>
working example
https://play.tailwindcss.com/160JJfEXJe
Related
In my React project I have a collapsed sidebar menu with a logo at the top. I would like to add functionality that on hovering over the collapsed sidebar, transforms the logo to a basic hamburger menu, and then reverts back to the logo when the mouse leaves the sidebar.
I have access to a designer that could create an animated asset (e.g. GIF), but I am not sure how I would implement something like this with a GIF.
In my limited experience with animating in web projects, I feel that it would be ideal to somehow be able to use CSS animation to make the transformation but don't have the skills to make that myself and I don't think that is something that the designer can do.
I would love to make this logo: https://i.stack.imgur.com/Bsqx9.png
Transform to a basic hamburger icon: https://i.stack.imgur.com/ivRYk.png
Would this be possible to implement in React with a GIF? Other animation formats?
If CSS would be best how could I go about creating the logo in CSS?
Edit: To clarify, I'm hoping to find a way to create a smooth transition between the two. This is why I'm particularly interested in things like CSS animations
Try this code with an Icon instead of a div. I'll add the codesandbox so you can try it out.
Updated Answer
Code with hover to allow tranisitions. With some tweaking you can fade in the Icon using css.
export default function App() {
const [isHovered, setIsHovered] = useState(false);
return (
<div className="App">
<div
className={`${isHovered ? "show" : "hide"}`}
onMouseOver={() => setIsHovered(false)}
>
Hover over me.
</div>
<div
className={`${isHovered ? "hide" : "show"}`}
onMouseOut={() => setIsHovered(true)}
>
I am shown when someone hovers over the div above.
</div>
</div>
);
}
css:
.hide {
display: none;
}
.show {
display: block;
background-color: red;
opacity: 0.6;
transition: 0.3s;
}
.show:hover {
transition: 0.3s;
opacity: 1;
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
Updated sandbox
https://codesandbox.io/s/blazing-night-yii1zx?file=/src/styles.css:58-410
Old Answer
export default function App() {
const [isHovered, setIsHovered] = useState(false);
return (
<div>
{isHovered ? (
<h1 onMouseOut={() => setIsHovered(false)}>Hover true</h1>
) : (
<h1 onMouseOver={() => setIsHovered(true)}>Hover false</h1>
)}
</div>
);
}
Old sandbox
The codesandbox: https://codesandbox.io/s/dank-water-mbtwfw?file=/src/App.js:176-579
I have a tailwind project with a super simple search field so far. When this search field is selected I want the border radius to decrease (make it more square like), apply a color, and some other small things. The transition seems to work for everything except the border-radius.
My markup looks like this:
<input
type="text"
className="transition-border duration-500 rounded-full bg-secondary-neutral pl-4 pr-14 py-2 outline-0 focus:border focus:border-accent-neutral focus:rounded-sm focus:bg-white focus:shadow-primary-extra-light focus:shadow-md text-sm text-ellipsis w-full max-w-sm"
placeholder="Søk etter produkter, merker og mer"
/>
I've also added this to my tailwind config to get border transition:
transitionProperty: {
'border': 'border,border-radius,box-shadow,background-color',
},
The relevant generated css for the input field looks like this:
.duration-500 {
transition-duration: 500ms;
}
.transition-border {
transition-property: border,border-radius,box-shadow,background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
What am I missing to get the animation on the border radius as well?
I am trying to learn how to use animation with Tailwind. The animation that I am trying hopelessly to make is:
Entering: "duration-200 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
The element I'm trying to animate is:
<div class="absolute top-0 inset-x-0 p-2 duration-200 ease-out transition transform origin-top-right">
Now I'm not quite sure exactly what to do since this animation should only run as soon as it is displayed I've attempted:
<div class="absolute top-0 inset-x-0 p-2 duration-200
ease-out transition transform origin-top-right" style="${this.showMenu ? '' : 'display:none'}">
However this doesn't really give me an animated result. What can I try next?
Using dynamic style is not usually recommeded. Instead you could use && operator and display only if the showMenu is set to true
{ this.showMenu && <div class="absolute top-0 inset-x-0 p-2 duration-200
ease-out transition transform origin-top-right"> }
I am using ngAnimate to animate entries in an ng-repeat. When loading the data all elements are animated as I have defined in my css:
.chat-message.notice.ng-enter {
-webkit-animation: rubberBand 1s;
-moz-animation: rubberBand 1s;
-ms-animation: rubberBand 1s;
animation: rubberBand 1s;
}
This works when a notice is appended with the following html:
<ul>
<li class="media chat-message pointer fade-animate"
ng-repeat-start="message in guestbook.messages track by $index"
ng-if="!message.bot">
<!-- more html -->
</li>
<li class="chat-message notice" ng-repeat-end ng-if="message.bot">
<div>
<p class="text-center">
{{ message.message }}
<small>({{ message.date | amTimeAgo }})</small>
<span class="close pull-right" ng-click="guestbook.remove(message)">×</span>
</p>
</div>
</li>
</ul>
However, when a new message is appended (at the top), every element is again animated. Is there a way that elements animate only once? That when a new message is appended to the array, only that element will animate?
JSFIDDLE
EDIT
After a few clicks on a 'new message', I can see not all notices are animated. Maybe it has something to do with the ng-repeat-start and ng-repeat-end?
If understood correctly just change this:
$scope.messages.unshift(message);
to this:
$scope.messages.push(message);
Even above answer fixed the problem, my solution might be helpful in other scenarios. The fix is pretty straightforward.
Use Angular varible $first and just add CSS class for the first element using ng-class directive in your HTML. In this example, class "first" will be added only to first element in ng-repeat:
ng-class="{'first': $first===true}"
and then apply animation rules to element with "first" CSS class
.chat-message.notice.first.ng-enter {
color:red !important;
font-weight:bold;
animation: rubberBand 1s;
}
Updated JSFIDDLE: http://jsfiddle.net/t6x3a1zj/7/
I have a system in place that retrieves dynamically retrieves stored messages from the server, the view for it is:
<div id= "messages" data-ng-controller="MessageController">
<div class="message" data-ng-repeat="message in messages | orderBy:'timestamp':true" data-ng-animate="'animate-message'" >
<div class="user">
{{ message.user.username }}
</div>
<div class="title">
{{ message.title }}
</div>
<div class="content" data-ng-bind-html-unsafe="message.content">
{{ message.content }}
</div>
</div>
</div>
I then have in my CSS file:
.animate-message-enter {
transition: 1s linear all;
-moz-transition: 1s linear all;
-webkit-transition: 1s linear all;
-o-transition: 1s linear all;
-ms-transition: 1s linear all;
opacity:0;
position:relative;
left:-100%;
}
.animate-message-enter.animate-message-enter-active {
opacity:1;
left:0%;
}
(this is just an extreme example transition so I can see the transition working)
However, upon a new object being entered into the array via $scope.messages.push(response); the new message simply pops onto the page and no animations take place, does anyone know what I've messed up?
Thanks :)
Tried to copy paste your code into plnkr and it works fine. Do you have more code?
http://plnkr.co/edit/gi6h3adNMfoXkUdiN4lY
The only thing I added was a simple addMessage function to test the transition.
<button ng-click="addMessage()">Add Message</button>