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?
Related
Is there any way to create a display or visibility transition using Tailwind and a conditional code at Next? I'm trying something like this, what I would like to achieve is a smooth fade in effect when the backend returns a exception message under the responseError object (using Context in Next) but there's no transition effect at all:
{
responseError ?
<span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
username or password incorrect
</span>
: null
}
or
{
responseError ?
<span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
{ responseError.message }
</span>
: null
}
Use opacity instead of visibility.
This stack overflow answer goes over a similar issue you are facing. In short, the visibility property has two possible values: visible or hidden. On the other hand, opacity can be between 0 and 1, so proper keyframes can be applied when using the transition property.
As a side note, I noticed you are checking for the responseError twice, once to render the <span> and again to apply tailwind classes. This will cause your fade in transition to only work when fading in because the <span> is only rendered when responseError exists. Instead, try something like this:
<span className={`${ responseError ? "opacity-100" : "opacity-0"} transition-opacity ease-in-out delay-150 duration-300 pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
{ responseError ? responseError.message : '' }
</span>
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
anyone please can help me figure it out how to make the 2 animations used in this website https://worldofwomen.art/ using react and tailwind css
First: the animated bar of this picture
second: the animated text : • NEW SITE LAUNCHING SOON
I am looking forward for the help from someone, i really passed the whole night searching of animation in react and tailwind css but i didn't find any tutorial about this.
Thank you so much for the help and the stop you put on my question
You can achieve the animation with just css (ie Tailwindcss) by using 'animation' css property
I- Create a nextjs project with the command: $npx create-next-app my-app
II- Setup tailwindcss with nextjs project: https://tailwindcss.com/docs/guides/nextjs
III- Create new React component animation.js, inside pages/ folder
import React from 'react'
export default function Animation2() {
return (
<>
{/* Image Animation */}
<div className="animate">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Image Animation - Reversed direction */}
<div className="animate-reversed">
<img src="/frise-2.2f579f.png" alt="" />
<img src="/frise-2.2f579f.png" alt="" />
</div>
{/* Text Animation */}
<div className="bg-[#332970] w-screen box-border p-4 flex items-center overflow-hidden fixed bottom-0">
<div className="animate">
{
[0,1,2,3,4,5,6,7,8,9,10,11].map((i) => (
<div className="text-[#139bac] whitespace-nowrap inline-flex items-center justify-center">• NEW SITE LAUNCHING SOON </div>
))
}
</div>
</div>
</>
);
}
The first div responsible for the animation of the image with the default direction from right to left. I used 2 img tags because it has to have 2 separate sets of the same img tag. because with the infinite loop, when one image disappears the second one appears and it will restart the loop without any gap (You can comment the second img tag to check the gap am talking about)
the second div is similar to the first one but it has the reversed direction property.
For the text animation, we do the same thing we have to create the text multiple times to avoid the gap when we animate the text for an infinite loop. And to avoid multiple lines of the same tag: • NEW SITE LAUNCHING SOON I wrapped in an array and loop through it
all the styles are integrated in the same component using tailwindcss except the animation that will be added in globals.css file like this:
Go to globals.css file and add the animation css code:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.animate{
display: flex;
animation: scroll 20s linear infinite;
}
.animate:hover{
animation-play-state: paused;
}
.animate-reversed{
display: flex;
animation: scroll 20s linear infinite;
animation-direction: reverse;
}
.animate-reversed:hover{
animation-play-state: paused;
}
#keyframes scroll {
0%{
transform: translateX(0);
}
100%{
transform: translate(-50%);
}
}
}
There are a few ways to do this, but taking into account the site you referenced, I noticed that it works with an infinite increment, so it's most likely done with JS.
PS.: I could do everything with javascript.
const sleed1 = document.getElementById("sleed1");
let position1 = 0;
setInterval(() => {
position1 = position1 + 10;
sleed1.style.backgroundPosition = position1 + 'px';
sleed1.style.transitionDuration = '100ms';
}, 40)
#sleed1 {
width: 100%;
height: 200px;
background-color: #ccc;
background-image: url("https://i.stack.imgur.com/zJXIx.png");
}
<div id="sleed1" />
To control the speed you can change 3 values:
Number of pixels increased, I put 10.
The duration of the transition, I put '100ms'.
The setInterval interval, I put 40.
Both will influence speed but in different ways, so adjust until you find the best solution for you.
To change the sleed side, change "position + n" to "position-n".
Same code in React. Using "useEffect" with ",[ ]". Important not to forget this for the code to run only once and avoid undesirable effects.
https://codesandbox.io/s/slide-image-animation-with-react-and-css-rfhvd?file=/src/App.js
I'm trying to use Tailwindcss in a React project where I am replicating the Star Wars website mobile menu. However, the box shadow that I am adding to the hamburger icon segments is not showing up when the nav drawer is opened.
Link to sandbox: https://play.tailwindcss.com/upmiAWTcso
index.js:
const toggleDrawer = (event) => {
document.querySelector("#drawer").classList.toggle("left-[-100%]");
document.querySelector("#drawer").classList.toggle("left-0");
document.querySelector("#bar-1").classList.toggle("hidden");
document.querySelector("#bar-2").classList.toggle("active-2");
document.querySelector("#bar-3").classList.toggle("active-3");
};
<div
onClick={toggleDrawer}
className="h-full flex flex-col justify-center items-center space-y-[8px]"
>
<span
id="bar-1"
className="block h-[2px] w-[30px] border-zinc-500 border-l-[4px] border-r-[20px] rounded-full transition-all duration-300"
></span>
<span
id="bar-2"
className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[20px] border-r-[4px] rounded-full origin-bottom-right transition-all duration-300"
></span>
<span
id="bar-3"
className="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[4px] border-r-[20px] rounded-full origin-bottom-left transition-all duration-300"
></span>
</div>;
global.css:
#layer components {
.active-2 {
#apply
rotate-45
-translate-x-2
translate-y-[530%]
!w-[34px]
!border-l-[25px]
!border-r-[5px]
!border-white
shadow-[#d50032];
}
.active-3 {
#apply
-rotate-45
translate-x-1
!w-[34px]
!border-l-[5px]
!border-r-[25px]
!border-white
shadow-[#106ae0] !important;
}
}
You only have a shadow color declared. You also need a shadow size like shadow-md.
Here's an example on Tailwind Play showing the difference https://play.tailwindcss.com/gxG7cir5EQ
You are applying !important the wrong way. To add !important to a tailwind class just add ! add the start like this:
#layer components {
.active-2 {
#apply
rotate-45
-translate-x-2
translate-y-[530%]
w-[34px]
border-l-[25px]
border-r-[5px]
border-white
!shadow-[#d50032];
}
.active-3 {
#apply
-rotate-45
translate-x-1
w-[34px]
border-l-[5px]
border-r-[25px]
border-white
!shadow-[#106ae0];
}
}
It's an browser support issue
The problem is an combination of border-radius and box-shadow if you open
https://play.tailwindcss.com/gxG7cir5EQ in opera it doesn't work but in Chrome for example it does. If you remove the rounded corners it shows the shadow.
I have an input search that I am trying to get ease with a transition css3 effect.
Every time that the user focus on that input, on the right hand will appear a Cancel button which is actually an icon to clean the input. Once that icon appears the width of the input changes, I want to ease the movement of that input because as you know the movement or the transition by default is so rough, I have this JSbin for you to see what I am doing and what I have so far.
the situation begins here
<ion-header-bar>
<label>
<input type="text" class="btnCancel"
placeholder="Sports and leagues finder..."
ng-model="query"
ng-focus="isSearchFocused=true"
ng-blur="isSearchFocused=false">
<div ng-show="query" ng-click="query=''">
<i class="ion-close positive"></i>
</div> -->
</label>
<button ng-show="isSearchFocused"
ng-click="query = ''">
<i class="ion-close-circled"></i>
</button>
</ion-header-bar>
css
.btnCancel {
-webkit-transition : all 2s ease;
transition : all 2s ease;
}
this is with CodePen just in case