i am using inertiajs(vue 3 laravel) the modal component.
the modal appear but the transition does not work.
<teleport to="body">
<transition leave-active-class="duration-200">
<div
v-show="show"
class="fixed inset-0 overflow-y-auto z-50"
scroll-region
>
<div
v-show="show"
class="fixed inset-0 transform transition-all"
#click="close"
>
<div class="absolute inset-0 bg-black opacity-75" />
</div>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="ease-in duration-200"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div
v-show="show"
style="max-width: 800px"
class="text-white bg-dark-btn px-6 py-4 rounded-t-2xl overflow-hidden shadow-xl transform transition-all fixed bottom-0 w-full mx-auto right-0 left-0"
>
<slot v-if="show" />
</div>
</transition>
</div>
</transition>
</teleport>
And finally i would like to have a transition like which leaves the bottom like.
I changed the place of the transition tag everywhere.
Related
my problem is that, after transitioned element fades, parent element jumps(not smoothly). I searched before asking in here but couldn't find the solution, thanks for the answers.
Here is the video about my issue:
https://streamable.com/us39pu
Main View Code: After adding new task or removing, animation works just fine with 'transition-group' e.g. no sudden jumps
<ul class="p-4 grid gap-2 grid-cols-1 relative">
<TransitionGroup
appear
move-class="transform transition duration-500 ease-in-out"
enter-active-class="transform transition duration-500 ease-in-out"
enter-from-class="opacity-0 scale-x-0 translate-x-1/2"
enter-to-class="opacity-100 scale-x-100 translate-x-0"
leave-active-class="transform transition duration-1000 ease-in-out absolute w-full "
leave-from-class="opacity-100 scale-x-100 translate-x-0"
leave-to-class="opacity-0 scale-x-0 translate-x-1/2"
>
<li v-for="task in tasks" :key="task.id">
<Task
:task="task"
#remove-task="removeTask"
#edit-task="editTask"
/>
</li>
</TransitionGroup>
</ul>
Task Component: Here editing div and removing animations works fine with 'transition' but after it fades main component jumps e.g. not smoothly
<transition
enter-active-class="transition transform duration-500 ease-in-out"
enter-from-class="scale-y-0 opacity-0 translate-y-1/2"
enter-to-class="scale-y-full opacity-100 translate-y-0"
leave-active-class="transition transform duration-500 ease-in-out"
leave-from-class="scale-y-full opacity-100 translate-y-0"
leave-to-class="scale-y-0 opacity-0 translate-y-1/2"
>
<div class="flex flex-col gap-2 mb-3" v-if="isEdit">
<input
v-model="taskLocal.title"
type="text"
class="p-1 text-center rounded-md"
/>
<select v-model="taskLocal.state" class="text-center p-1">
<option value="important">Important</option>
<option value="dontForget">Don't Forget</option>
</select>
<button
#click.prevent="editTask(taskLocal)"
class="p-2 bg-blue-400 rounded-xl"
>
edit
</button>
</div>
</transition>
<div
class="flex justify-between mb-2 shadow-2xl gap-2 bg-gradient-to-r from-white to-slate-300 rounded-xl items-center p-3 pt-6 relative"
>
<div class="absolute -ml-2 top-0 flex left-0 right-0 justify-between">
<PaperClipIcon class="w-9 -mt-3" />
<p class="underline decoration-solid break-all text-rose-400 text-xs">
Created At:
{{ new Date(task.created_at as any as Date).toLocaleDateString() }}
</p>
<div class="flex gap-2">
<PencilSquareIcon
#click.prevent="isEdit = !isEdit"
class="w-5 text-black hover:text-blue-400 cursor-pointer"
/>
<XMarkIcon
#click.prevent="removeScreen = !removeScreen"
class="w-6 hover:text-red-400 cursor-pointer"
/>
</div>
</div>
<ExclamationCircleIcon
class="w-6 h-6 text-center"
:class="[task.state === 'important' ? 'text-red-600' : 'text-green-600']"
/>
<p
class="transition-all flex-1 duration-1000 ease-in-out break-all text-center text-xl"
:class="[
task.isChecked ? ['line-through', 'text-slate-400'] : 'text-slate-700',
]"
>
{{ task.title }}
</p>
<CheckIcon
v-model="taskLocal.isChecked"
#click.prevent="taskCheck(taskLocal)"
class="w-8 h-8 text-center transition-all rounded-full hover:bg-green-300 duration-500 ease-in-out cursor-pointer"
:class="[taskLocal.isChecked ? 'text-green-600' : 'text-gray-400']"
/>
</div>
<transition
enter-active-class="transform transition duration-1000 ease-in-out"
enter-from-class="-translate-y-1/2 opacity-0 scale-y-0"
enter-to-class="translate-y-0 opacity-100 scale-y-100"
leave-active-class="transform transition duration-500 ease-in-out"
leave-from-class="translate-y-0 opacity-100 scale-y-100"
leave-to-class="-translate-y-1/2 opacity-00 scale-y-0"
>
<div
class="flex flex-col p-1 bg-white rounded-xl items-center"
v-if="removeScreen"
>
<h1 class="text-rose-400 text-center">Remove Task</h1>
<p class="text-slate-400">Task will be removed! Are you sure?</p>
<div class="flex gap-2">
<button
#click.prevent="removeScreen = !removeScreen"
class="p-1 px-4 rounded-xl bg-red-600"
>
No
</button>
<button
#click.prevent="removeTask(task.id as any as number)"
class="p-1 px-4 rounded-xl bg-green-600"
>
Yes
</button>
</div>
</div>
</transition>
I tried already existing problems but couldn't find any solution for my problem.
Either svelte or tailwind transitions.
This is basically copied from the tailwind components page with some changes to make it work as best as I knew how with svelte. The tailwind component page says it requires JS, but I cannot find any examples of the kind of JS that would be expected in order for it to work the way it does on the component page.
There's a comment block of tailwind classes, but I cannot find docs on how they are to be used.
The side panel works, as in it hides and shows and all the clicks are appropriate, but it snaps. I'd like it to slide in from the side.
How do I make it do a sliding anim/transition?
<aside
class="relative z-10 "
aria-labelledby="slide-over-title"
role="dialog"
aria-modal="true"
class:block={showSidePanel} << my toggle variable in Svelte
class:hidden={!showSidePanel}
on:click|stopPropagation|preventDefault={toggleSidePanel}
transition:fly={{ x: 200, duration: 300 }}
>
<!--
Background backdrop, show/hide based on slide-over state.
Entering: "ease-in-out duration-500"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in-out duration-500"
From: "opacity-100"
To: "opacity-0"
-->
<div
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
class:block={showSidePanel}
class:hidden={!showSidePanel}
/>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-y-0 right-0 mt-20 flex max-w-full pl-10">
<!--
Slide-over panel, show/hide based on slide-over state.
Entering: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-full"
To: "translate-x-0"
Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-0"
To: "translate-x-full"
-->
<div
class="my-auto h-full w-screen max-w-2xl"
on:click|stopPropagation|preventDefault={() => {
// this blocks clicks closing the sidepanel
}}
>
<div
class="m-auto flex h-[95%] flex-col overflow-y-scroll bg-white py-6 shadow-xl"
>
<div class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2
class="text-lg font-medium text-gray-900"
id="slide-over-title"
>
Panel title
</h2>
<div class="ml-3 flex h-7 items-center">
<button
type="button"
class="rounded-md bg-white font-bold text-gray-400 hover:text-gray-500"
on:click|stopPropagation={toggleSidePanel}
>
<span class="sr-only">Close panel</span>
<Icon src={X} theme="solid" class="h-8 w-8 font-bold" />
</button>
</div>
</div>
</div>
<div class="relative mt-6 flex-1 px-4 sm:px-6">
<!-- Replace with your content -->
<div class="absolute inset-0 px-4 sm:px-6">
<div
class="h-full border-2 border-dashed border-gray-200"
aria-hidden="true"
/>
</div>
<!-- /End replace -->
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
Instead of using classes to hide or show your sidebar you should use an {#if} block wrapped around the entire aside element to hide and show the sidebar and overlay.
Then you can use the Svelte transition that is right for each element. In the Tailwind comments it's using translate-x-full for the panel transition to get a similar effect you can bind the clientWidth of the actual panel to a variable and use that as the x amount in your Svelte fly transition.
Something like this (I removed some of your code since you had no components linked and used Tailwind CDN so the Tailwind classes would work like in this REPL):
<script>
import { fly, fade } from 'svelte/transition'
let showSidePanel, width
function toggleSidePanel() {
showSidePanel = !showSidePanel
}
</script>
<svelte:head>
<script src="https://cdn.tailwindcss.com"></script>
</svelte:head>
<div>
<button class="p-3" on:click={toggleSidePanel}>
Show side panel
</button>
</div>
{#if showSidePanel}
<aside class="relative z-10">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" transition:fade/>
<div class="fixed inset-0 overflow-hidden">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-y-0 right-0 mt-20 flex max-w-full pl-10">
<div class="my-auto h-full w-screen max-w-2xl">
<div bind:clientWidth={width} transition:fly={{ x: width }} class="m-auto flex h-[95%] flex-col overflow-y-scroll bg-white py-6 shadow-xl">
<div class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2 class="text-lg font-medium text-gray-900">
Panel title
</h2>
<div class="ml-3 flex h-7 items-center">
<button class="rounded-md bg-white font-bold text-gray-400 hover:text-gray-500" on:click={toggleSidePanel}>
close
</button>
</div>
</div>
</div>
<div class="relative mt-6 flex-1 px-4 sm:px-6">
<div class="absolute inset-0 px-4 sm:px-6">
<div class="h-full border-2 border-dashed border-gray-200" aria-hidden="true">Some content</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</aside>
{/if}
I am trying to create a homepage that has two columns, one with text and another with a carousel of images.On web view, the layout looks great, but on mobile view, the images are compressed leaving a lot of space around. I have tried setting the image height to full with h-full which doesn't work. How can i make the image occupy the full grid height on mobile view as well? Any recommendations / references will be appreciated.
My code :
<section className="p-9">
<div className="min-h-screen grid grid-cols-1 sm:grid-cols-2 md:grid-cols-8 lg:grid-cols-8 items-center pt-9">
<div className="col-span-2">
<p className="font-bold text-4xl mb-4 ml-4">
A construction <span className="text-red-600">ecosystem</span> that is
simple, transparent and <span className="text-red-600">efficient</span>
</p>
</div>
{/* <div className="h-full col-span-6">
<img className="w-full h-full m-2" src={carousel1} />
</div> */}
<div
id="carouselExampleCrossfade"
className="absolute carousel slide carousel-fade carousel-dark relative col-span-6 m-2"
data-bs-ride="carousel"
>
<div className="carousel-inner relative w-full h-full overflow-hidden">
<div className="carousel-item active float-left w-full bg-no-repeat bg-cover">
<img
src="https://www.shell.com/business-customers/construction-and-road/about-construction-and-road/_jcr_content/pagePromo/image.img.960.jpeg/1652883928742/two-engineers-working-on-a-construction-site.jpeg"
className="block w-full h-full rounded"
alt="Wild Landscape"
/>
<Link
href={`/service`}
className="absolute bottom-0 left-0 m-6 py-2.5 px-2.5 bg-red-600 text-white font-medium text-md leading-tight rounded hover:text-red-700 hover:bg-gray-100 focus:bg-none focus:outline-none focus:ring-0 active:bg-gray-200 transition duration-150 ease-in-out"
>
<span>{"Testing"}</span>
</Link>
</div>
</div>
</div>
</div>
</section>;
Link to code here
Current view on mobile:
Current view on web:
How do I keep my header, left/right sidebar sticky on scroll (on desktop, not mobile)?
It doesn't seem to be working with the fixed or sticky class, I've posted an example here: https://play.tailwindcss.com/Bj68nUJj1C.
<!-- Background color split screen for large screens -->
<div class="fixed top-0 left-0 h-full w-1/2 bg-white" aria-hidden="true"></div>
<div class="fixed top-0 right-0 h-full w-1/2 bg-gray-50" aria-hidden="true"></div>
<div class="relative flex min-h-screen flex-col">
<!-- Navbar -->
<nav class="flex-shrink-0 bg-indigo-600">
<div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<!-- Logo section -->
<div class="flex items-center px-2 lg:px-0 xl:w-64">
<div class="flex-shrink-0">
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=300" alt="Workflow" />
</div>
</div>
<!-- Search section -->
<div class="flex flex-1 justify-center lg:justify-end">
<div class="w-full px-2 lg:px-6">
<label for="search" class="sr-only">Search projects</label>
<div class="relative text-indigo-200 focus-within:text-gray-400">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<!-- Heroicon name: mini/magnifying-glass -->
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
</svg>
</div>
<input id="search" name="search" class="block w-full rounded-md border border-transparent bg-indigo-400 bg-opacity-25 py-2 pl-10 pr-3 leading-5 text-indigo-100 placeholder-indigo-200 focus:bg-white focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-sm" placeholder="Search projects" type="search" />
</div>
</div>
</div>
<div class="flex lg:hidden">
<!-- Mobile menu button -->
<button type="button" class="inline-flex items-center justify-center rounded-md bg-indigo-600 p-2 text-indigo-400 hover:bg-indigo-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!--
Icon when menu is closed.
Heroicon name: outline/bars-3-center-left
Menu open: "hidden", Menu closed: "block"
-->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />
</svg>
<!--
Icon when menu is open.
Heroicon name: outline/x-mark
Menu open: "block", Menu closed: "hidden"
-->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Links section -->
<div class="hidden lg:block lg:w-80">
<div class="flex items-center justify-end">
<div class="flex">
Documentation
Support
</div>
<!-- Profile dropdown -->
<div class="relative ml-4 flex-shrink-0">
<div>
<button type="button" class="flex rounded-full bg-indigo-700 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-700" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=256&h=256&q=80" alt="" />
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<!-- Active: "bg-gray-100", Not Active: "" -->
View Profile
Settings
Logout
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- 3 column wrapper -->
<div class="mx-auto w-full max-w-7xl flex-grow lg:flex xl:px-8">
<!-- Left sidebar & main wrapper -->
<div class="min-w-0 flex-1 bg-white xl:flex">
<div class="border-b border-gray-200 bg-white xl:w-64 xl:flex-shrink-0 xl:border-b-0 xl:border-r xl:border-gray-200">
<div class="h-full py-6 pl-4 pr-6 sm:pl-6 lg:pl-8 xl:pl-0">
<!-- Start left column area -->
<div class="relative h-full" style="min-height: 12rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200"></div>
</div>
<!-- End left column area -->
</div>
</div>
<div class="bg-white lg:min-w-0 lg:flex-1">
<div class="h-full py-6 px-4 sm:px-6 lg:px-8">
<!-- Start main area-->
<div class="relative h-full" style="min-height: 36rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200"></div>
</div>
<!-- End main area -->
</div>
</div>
</div>
<div class="bg-gray-50 pr-4 sm:pr-6 lg:flex-shrink-0 lg:border-l lg:border-gray-200 lg:pr-8 xl:pr-0">
<div class="h-full py-6 pl-6 lg:w-80">
<!-- Start right column area -->
<div class="relative h-full" style="min-height: 16rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200"></div>
</div>
<!-- End right column area -->
</div>
</div>
</div>
</div>
You need to use top-X class together with sticky. For navbar sticky top-0 and for sidebar something like sticky top-20 should work.
Prefix it with corresponding breakpoint prefix to apply it only for bigger screens.
You can try using grid instead of flex and change your layout a bit to achieve this.
<script src="https://cdn.tailwindcss.com"></script>
<div class="fixed top-0 left-0 h-full w-1/2 bg-white" aria-hidden="true"></div>
<div class="fixed top-0 right-0 h-full w-1/2 bg-gray-50" aria-hidden="true"></div>
<div class="relative grid grid-cols-[2rem_1fr_2rem] xl:grid-cols-[minmax(2rem,1fr)_16rem_minmax(200px,calc(80rem-32rem))_16rem_minmax(2rem,1fr)] lg:grid-cols-[2rem_minmax(200px,calc(100%-16rem))_16rem_2rem] min-h-screen">
<!-- Navbar -->
<nav class="min-h-[4rem] sticky top-0 z-10 col-[1/-1] row-[1] flex justify-center items-center bg-indigo-600 text-white">
Nav
</nav>
<aside class="max-h-screen xl:sticky lg:static top-12 col-[2] row-[2] border-b border-gray-200 bg-white xl:border-b-0 xl:border-r xl:border-gray-200">
<div class="h-full py-6 pl-4 pr-6 sm:pl-6 lg:pl-8 xl:pl-0">
<!-- Start left column area -->
<div class="relative h-full" style="min-height: 12rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center">
Aside
</div>
</div>
<!-- End left column area -->
</div>
</aside>
<main class="bg-white col-[2] row[3] xl:col-[3] xl:row-[2] min-h-[150vh]">
<div class="h-full py-6 px-4 sm:px-6 lg:px-8">
<!-- Start main area-->
<div class="relative h-full" style="min-height: 36rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center">
Main
</div>
</div>
<!-- End main area -->
</div>
</main>
<aside class="max-h-screen sticky top-12 col-[2] row-[4] xl:col-[4] xl:row-[2] lg:col-[3] lg:row-[2/2_span] bg-gray-50 pr-4 sm:pr-6 lg:border-l lg:border-gray-200 lg:pr-8 xl:pr-0">
<div class="h-full py-6 pl-6">
<!-- Start right column area -->
<div class="relative h-full" style="min-height: 16rem">
<div class="absolute inset-0 rounded-lg border-2 border-dashed border-gray-200 flex justify-center items-center">
Aside
</div>
</div>
<!-- End right column area -->
</div>
</aside>
</div>
I try to solve your problem,
you can check here
I'm trying to add / style 3 boxes stacked on top of each other and then attach an image to it as such
https://i.stack.imgur.com/jVdIo.png
I was able to achieve this but it's leaning side ways
https://i.stack.imgur.com/fl0Zz.png
<div className='flex flex-col box-border rounded strok h-60 w-48 p-4 border-2 ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'>
<div className=' box-border rounded strok h-32 w-32 p-4 border-8 bg-black ...'></div>
</div>
</div>
</div>
You have all the boxes nested with padding. Since they're nested, they're considered children. The parents have padding. Consider having a parent with a position of relative and the 3 boxes having a position of absolute.
<div class="h-screen w-screen bg-gray-200 py-20 flex justify-center items-center sm:py-12">
<div class="h-40 w-40 relative">
<div class="rounded h-[150px] w-[150px] bg-red-700 absolute z-30 left-1">
</div>
<div class="rounded h-[150px] w-[134px] bg-slate-500 absolute z-20 top-3 left-3"></div>
<div class="rounded h-[142px] w-[118px] bg-black absolute z-10 top-8 left-5"></div>
I made an example for you on tailwind playground https://play.tailwindcss.com/MJnaFMVio6
This is how to implement that:
<!-- Background -->
<div class="mx-auto h-[500px] w-[500px] flex justify-center items-center bg-blue-500 relative p-[10px]">
<!-- Boxes container -->
<div class="relative">
<div class="relative mt-4 mx-4 h-full">
<!-- Boxes stacked behind -->
<div class="absolute -bottom-4 scale-[0.85] origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-2xl"></div>
<div class="absolute -bottom-2 scale-95 origin-bottom inset-x-0 h-full w-full bg-white/40 backdrop-blur-md rounded-3xl shadow-sm"></div>
<!-- Box on top -->
<div class="p-4 bg-white/60 backdrop-blur-md rounded-3xl h-full">
<img class="rounded-[20px]" src="https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png">
</div>
</div>
</div>
</div>
On Tailwind play: https://play.tailwindcss.com/dmU2c4ai36