I'm using Tailwind CSS, .NET Core 3.1 Razor Pages and get the following error
Found a malformed 'input' tag helper. Tag helpers must have a start and end tag or be self closing
with this code
<form asp-route="Search" method="get">
<label for="place-address" class="block text-sm font-medium leading-5 text-gray-700">Enter your address</label>
<div class="mt-1 flex rounded-md shadow-sm">
<div class="relative flex-grow focus-within:z-10">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
</div>
<input asp-for="Address" id="place-address" class="form-input block w-full rounded-none rounded-l-md pl-10 transition ease-in-out duration-150 sm:text-sm sm:leading-5" />
</div>
<button type="submit" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-r-md text-gray-700 bg-gray-50 hover:text-gray-500 hover:bg-white focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" ">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<span class="ml-2">Search</span>
</button>
</div>
</form>
When I remove the SVG elements the error goes away. How can I keep the SVG elements and make this form work
Related
I am trying to position a panel to the right of avatar icon. i want to make it look like the supabase dashboard.
i have the following already. iam using tailwindcss and tailwind/headlessui for the popover
<Popover className="relative flex flex-col items-center">
<Popover.Panel
className="absolute -top-32 right-0 z-50 w-screen max-w-[270px] px-4 sm:px-0 translate-x-full ">
<div className="overflow-hidden rounded-sm shadow ring-1 ring-black ring-opacity-5">
<div className="block w-full h-12 bg-blue-50 py-3 px-3 content-center">
<div>
{
(isLoading || isError) ? (
<div role="status" className="space-y-2.5 animate-pulse max-w">
<div className="h-2.5 bg-gray-200 rounded w-full"></div>
</div>
) : (
<h4 className="font-semibold">
{user.email}
</h4>
)
}
</div>
</div>
<div className="relative grid grid-cols-1 gap-4 bg-white py-7 ">
<div className="flex flex-col gap-6">
<PanelItem content="Wishlist" href="/v/wishlist">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12.62 20.81C12.28 20.93 11.72 20.93 11.38 20.81C8.48 19.82 2 15.69 2 8.68998C2 5.59998 4.49 3.09998 7.56 3.09998C9.38 3.09998 10.99 3.97998 12 5.33998C13.01 3.97998 14.63 3.09998 16.44 3.09998C19.51 3.09998 22 5.59998 22 8.68998C22 15.69 15.52 19.82 12.62 20.81Z"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</PanelItem>
</div>
</div>
<Button variant="primary" className="rounded-none" onClick={handleSignOut}>
<span className="text-sm font-medium" >Sign Out</span>
</Button>
</div>
</Popover.Panel>
</Popover>
it looks like this.
but should look like this
I am currently building a dashboard app and I am facing an issue I can´t solve.
App.vue
<template>
<div class="flex flex-row min-h-screen w-screen">
<SideBar />
<div class="flex flex-col w-full bg-gray-300 shrink min-w-0">
<TopBar />
<RouterView />
</div>
</div>
</template>
Dropdown fragment in TopBar component (flowbite acts normal):
<button
type="button"
class="flex mr-3 text-sm md:mr-0 items-center"
id="user-menu-button"
aria-expanded="false"
data-dropdown-toggle="user-menu"
>
<span class="sr-only">Open user menu</span>
<img
class="w-8 h-8 rounded-full border-green"
src="https://picsum.photos/200"
alt="user photo"
/>
<span class="ml-3 text-medium text-gray-500"
>Hallo, <span class="font-semibold">Leon!</span></span
>
</button>
<!-- Dropdown menu -->
<div
class="
hidden
z-50
my-4
text-base
list-none
bg-white
rounded
divide-y divide-gray-100
shadow
dark:bg-gray-700 dark:divide-gray-600
"
id="user-menu"
style="
position: absolute;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(1246px, 723px);
"
data-popper-reference-hidden=""
data-popper-escaped=""
data-popper-placement="top"
>
Start of at the RouterView injected Component:
<template>
<main class="w-full h-full py-5 px-5">
<CardStatus />
<Card class="max-w-3xl max-h-80 p-5">
<div class="mb-4 flex flex-row justify-between">
<h5
class="
text-xl
font-semibold
tracking-tight
text-gray-900
dark:text-white
"
>
Dropdown fragment in CardStatus component (flowbite not working):
<button
id="dropdownDefault"
data-dropdown-toggle="dropdown"
class="
text-white
bg-blue-700
hover:bg-blue-800
focus:ring-4 focus:outline-none focus:ring-blue-300
font-medium
rounded-lg
text-sm
px-4
py-2.5
text-center
inline-flex
items-center
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
"
type="button"
>
Dropdown button
<svg
class="w-4 h-4 ml-2"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
></path>
</svg>
</button>
<!-- Dropdown menu -->
<div
id="dropdown"
class="
z-10
hidden
bg-white
divide-y divide-gray-100
rounded
shadow
w-44
dark:bg-gray-700
"
>
<ul
class="py-1 text-sm text-gray-700 dark:text-gray-200"
aria-labelledby="dropdownDefault"
>
I have no idea why it acts like this. I imported and installed everything like explained in the documentation.
Thanks
In my laravel vuejs application I have following vue to display some data inside a datatable .
For the better user experience, I have added a Show more option to load data.
<show-more :data-size="documents.length" increment-amount="5" >
<div slot-scope="{ showMore, showAmount }">
<div v-bind:class = "selectedForAction.count() === 0 ? 'h-15' : ''">
<action-bar :count="selectedForAction.count()">
<div slot="table-header" class="flex items-center justify-between bg-white border-certstyle-border border-b rounded-t py-4 px-10 w-full ">
<!--Course -->
<div class="flex items-center rounded-full w-22 overflow-hidden shadow-soft">
<selectable-all item="selectAll" :data="documents" #select="selectAll"></selectable-all>
</div>
<div class="flex flex-col items-left text-left w-10/12">
Document
</div>
<div class="w-74 text-left" item="validFor">
Valid until
</div>
<div class="w-1/12 text-center" item="status">
Validity
</div>
<div class="px-8 w-32">
</div>
<div class="px-8">
</div>
</div>
<button v-if="selectedForAction.count() === 1" #click="editSelectedDocument" class="flex items-center text-certstyle-titles text-sm mx-4" >
<span class="mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
</span>
<span class="font-bold">Edit</span>
</button>
<button #click="removeSelectedDocument" class="flex items-center text-certstyle-titles text-sm mx-4" >
<span class="mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></svg>
</span>
<span class="font-bold">Remove</span>
</button>
</action-bar>
</div>
<!--Certificates-->
<div v-if="documents[index] !== undefined" v-for="(i, index) in showAmount" class="flex items-center justify-between border-certstyle-border border-b px-10 py-1 hover:bg-certstyle-background-light transition-colors duration-150">
<!--Certificate institute image-->
<div class="flex items-center " item="certificatedChecked" >
<div class="relative">
<div class="rounded-full h-14 w-10 overflow-hidden shadow-soft pt-4">
<selectable
v-model="selectedForAction"
:item="documents[index].id"
:ref="documents[index].id"
></selectable>
</div>
</div>
</div>
<div class="flex flex-col items-left text-left w-10/12" item="certificate">
<span :title="documents[index].name" style="cursor: help;" class="text-certstyle-titles font-bold cursor-help">{{ documents[index].name }}</span>
</div>
<!--Certificate due date-->
<div class="w-74 text-left" item="validFor">
<p class="text-sm valid-until not-applicable" v-if="documents[index].is_valid_forever">{{ 'Indefinite'}}</p>
<p class="text-sm valid-until" v-else>{{ documents[index].expires_at_formatted }}</p>
</div>
<!-- Certificate status-->
<div class="w-48 text-center" item="status">
<status :status="documents[index].validity_status.toLowerCase()"></status>
</div>
<!--Download icon-->
<div class="cs--dashboard-employee-certificate-index--certificate-download-icon px-8" item="download">
<a v-if="documents[index].url !== null" :href="getDocumentDownloadLocation(documents[index].id)" class="text-certstyle-text-light">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
</a>
</div>
<!--Preview icon-->
<div class="cs--dashboard-employee-certificate-index--certificate-download-icon px-8" item="view">
<a v-if="documents[index].url !== null" target="_blank" :href="getDocumentPreviewLocation(documents[index].id)" class="text-certstyle-text-light">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
</a>
</div>
<div class="w-0 flex justify-end">
<edit-documents-modal :document="documents[index]" :identifier="`editDocument${documents[index].id}`"></edit-documents-modal>
</div>
</div>
<div class="relative flex items-center justify-center">
<!--Show more button-->
<button class="absolute border focus:outline-none hover:bg-certstyle-orange bg-white border-certstyle-orange hover:text-white text-certstyle-orange font-bold text-sm rounded px-4 py-1 mt-32 " v-if="showAmount < documents.length" #click="showMore">
show more documents
</button>
</div>
</div>
</show-more>
Now the issue is, When I tried to run this, I get following console error and my data table is not getting displayed. Not even the headers...
[Vue warn]: Error in render: "TypeError: Cannot read properties of
undefined (reading 'length')"
Its better to use computed property to handle these situations
computed: {
getDocumentSize() {
return this.documents ? this.documents.length : 0;
}
}
and in template, do the below change
<show-more :data-size="getDocumentSize" increment-amount="5" >
....
I am trying to scrape 100.0% from style attribute:
<div class="w-full mt-1 bg-white rounded-lg shadow">
<div class="py-1 bg-purple-900 rounded-lg" style="width: 100.0%"></div>
</div>
The page source response does not go this deep into the page, I have tried:
def ScrapePercents():
URL = "https://citystrides.com/cities/26013/search_striders?page=1"
page = requests.get(URL)
soup = BeautifulSoup(page.content, "html.parser")
results = soup.find("div", class_="flex flex-wrap space-y-4")
percents = results.find_all("div", class_="py-1 bg-purple-900 rounded-lg")
pl = []
for percent in percents:
cleantext = percent['style'].lstrip('width: ')
percent_neat = (cleantext.strip('%'))
percent_float = float(percent_neat)
pl.append(percent_float)
print("pl as it appends ", pl)
return pl
And
def Selenium():
print("shell for selenium")
pl = "shell for selenium percents"
driver = webdriver.Chrome("chromedriver.exe")
driver.get("https://citystrides.com/cities/26013/search_striders")
content = driver.page_source
soup = BeautifulSoup(content)
results = soup.find("div", class_="flex flex-wrap space-y-4")
return soup
The second code is set just to see whether the content includes the nested div. I'm struggling to work out how to get the nested div.
Using Selenium to extract the DIV content you need to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following Locator Strategies:
Using CSS_SELECTOR:
driver.get("https://citystrides.com/cities/26013/search_striders")
print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, ".flex.flex-wrap.space-y-4"))).get_attribute("innerHTML"))
Using XPATH:
driver.get("https://citystrides.com/cities/26013/search_striders")
print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[#class='flex flex-wrap space-y-4']"))).get_attribute("innerHTML"))
Note : You have to add the following imports :
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
Console Output:
<div id="user_10277" class="w-full max-w-lg p-2 transition duration-150 rounded-lg shadow-md bg-gradient-to-br from-gray-50 to-gray-200">
<div class="flex-grow text-left">
<h2 class="overflow-hidden text-sm font-bold text-gray-900 truncate">Pedro Queiroz</h2>
<div class="text-xs uppercase">5233 streets</div>
</div>
</div>
<div class="flex justify-between mt-5 text-sm">
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/10277/map">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
LifeMap
</a> </div>
<div title="Pedro Queiroz is a Supporter">💫</div>
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/10277">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Profile
</a> </div>
</div>
</div>
<div id="user_18066" class="w-full max-w-lg p-2 transition duration-150 rounded-lg shadow-md bg-gradient-to-br from-gray-50 to-gray-200">
<div class="flex">
<img loading="lazy" class="flex-none text-xs rounded-full h-16 w-16 mr-2" alt="" src="https://www.gravatar.com/avatar/9f78d924bbc876075b775da81282d6d7?d=https%3A%2F%2Fcitystrides.com%2Fassets%2Flogo_menu-4dc9d8eddd18724d2784165652c6ca07b47443b447fba88a84a4adc856d3605b.png">
<div class="flex-grow text-left">
<h2 class="overflow-hidden text-sm font-bold text-gray-900 truncate">Ali G</h2>
<div class="text-xs uppercase">2848 streets</div>
</div>
</div>
<div class="flex justify-between mt-5 text-sm">
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/18066/map">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
LifeMap
</a> </div>
<div title="Ali G is a Supporter">💫</div>
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/18066">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Profile
</a> </div>
</div>
</div>
<div id="user_24203" class="w-full max-w-lg p-2 transition duration-150 rounded-lg shadow-md bg-gradient-to-br from-gray-50 to-gray-200">
<div class="flex">
<img loading="lazy" class="flex-none text-xs rounded-full h-16 w-16 mr-2" alt="" src="https://www.gravatar.com/avatar/1359108e2ffc9fefe8876939f32a969f?d=https%3A%2F%2Fcitystrides.com%2Fassets%2Flogo_menu-4dc9d8eddd18724d2784165652c6ca07b47443b447fba88a84a4adc856d3605b.png">
<div class="flex-grow text-left">
<h2 class="overflow-hidden text-sm font-bold text-gray-900 truncate">Brad Windon</h2>
<div class="text-xs uppercase">2784 streets</div>
</div>
</div>
<div class="flex justify-between mt-5 text-sm">
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/24203/map">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
LifeMap
</a> </div>
<div title="Brad Windon is a Supporter">💫</div>
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/24203">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Profile
</a> </div>
</div>
</div>
<div id="user_37225" class="w-full max-w-lg p-2 transition duration-150 rounded-lg shadow-md bg-gradient-to-br from-gray-50 to-gray-200">
<div class="flex">
<img loading="lazy" class="flex-none text-xs rounded-full h-16 w-16 mr-2" alt="" src="https://www.gravatar.com/avatar/e4e29c4688468497e59a99a867d1d27e?d=https%3A%2F%2Fcitystrides.com%2Fassets%2Flogo_menu-4dc9d8eddd18724d2784165652c6ca07b47443b447fba88a84a4adc856d3605b.png">
<div class="flex-grow text-left">
<h2 class="overflow-hidden text-sm font-bold text-gray-900 truncate">Randy Adams</h2>
<div class="text-xs uppercase">3350 streets</div>
</div>
</div>
<div class="flex justify-between mt-5 text-sm">
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/37225/map">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
LifeMap
</a> </div>
<div title="Randy Adams is a Supporter">💫</div>
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/37225">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Profile
</a> </div>
</div>
</div>
<div id="user_29373" class="w-full max-w-lg p-2 transition duration-150 rounded-lg shadow-md bg-gradient-to-br from-gray-50 to-gray-200">
<div class="flex">
<img loading="lazy" class="flex-none text-xs rounded-full h-16 w-16 mr-2" alt="" src="https://www.gravatar.com/avatar/f372f7d189b34ee38d4304d34d0e92d8?d=https%3A%2F%2Fcitystrides.com%2Fassets%2Flogo_menu-4dc9d8eddd18724d2784165652c6ca07b47443b447fba88a84a4adc856d3605b.png">
<div class="flex-grow text-left">
<h2 class="overflow-hidden text-sm font-bold text-gray-900 truncate">Nudibranch Whisperer</h2>
<div class="text-xs uppercase">2451 streets</div>
</div>
</div>
<div class="flex justify-between mt-5 text-sm">
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/29373/map">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
LifeMap
</a> </div>
<div title="Nudibranch Whisperer is a Supporter">💫</div>
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/29373">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Profile
</a> </div>
</div>
</div>
<div id="user_39377" class="w-full max-w-lg p-2 transition duration-150 rounded-lg shadow-md bg-gradient-to-br from-gray-50 to-gray-200">
<div class="flex">
<img loading="lazy" class="flex-none text-xs rounded-full h-16 w-16 mr-2" alt="" src="https://www.gravatar.com/avatar/d22b9542672cb8c7fe062fa0d05663df?d=https%3A%2F%2Fcitystrides.com%2Fassets%2Flogo_menu-4dc9d8eddd18724d2784165652c6ca07b47443b447fba88a84a4adc856d3605b.png">
<div class="flex-grow text-left">
<h2 class="overflow-hidden text-sm font-bold text-gray-900 truncate">Nathan Moas</h2>
<div class="text-xs uppercase">2360 streets</div>
</div>
</div>
<div class="flex justify-between mt-5 text-sm">
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/39377/map">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
LifeMap
</a> </div>
<div title="Nathan Moas is a Supporter">💫</div>
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/39377">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Profile
</a> </div>
</div>
</div>
<div id="user_39306" class="w-full max-w-lg p-2 transition duration-150 rounded-lg shadow-md bg-gradient-to-br from-gray-50 to-gray-200">
<div class="flex">
<img loading="lazy" class="flex-none text-xs rounded-full h-16 w-16 mr-2" alt="" src="https://www.gravatar.com/avatar/bf78feece98a5aa399ffbc8167e195b0?d=https%3A%2F%2Fcitystrides.com%2Fassets%2Flogo_menu-4dc9d8eddd18724d2784165652c6ca07b47443b447fba88a84a4adc856d3605b.png">
<div class="flex-grow text-left">
<h2 class="overflow-hidden text-sm font-bold text-gray-900 truncate">Conrad Bajkowski</h2>
<div class="text-xs uppercase">1574 streets</div>
</div>
</div>
<div class="flex justify-between mt-5 text-sm">
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/39306/map">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
LifeMap
</a> </div>
<div title="Conrad Bajkowski is a Supporter">💫</div>
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/39306">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Profile
</a> </div>
</div>
</div>
<div class="w-full">
<div class="flow-root">
<div class="relative">
<div class="relative flex items-start space-x-3">
<div>
<div class="relative">
<div class="flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full ring-8 ring-white">
<svg class="w-5 h-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
<div class="min-w-0 flex-1 py-1.5">
<div class="text-sm text-gray-500">
<span class="font-medium text-gray-900">A private Strider</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full">
<div class="flow-root">
<div class="relative">
<div class="relative flex items-start space-x-3">
<div>
<div class="relative">
<div class="flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full ring-8 ring-white">
<svg class="w-5 h-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
<div class="min-w-0 flex-1 py-1.5">
<div class="text-sm text-gray-500">
<span class="font-medium text-gray-900">A private Strider</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full">
<div class="flow-root">
<div class="relative">
<div class="relative flex items-start space-x-3">
<div>
<div class="relative">
<div class="flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full ring-8 ring-white">
<svg class="w-5 h-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
<div class="min-w-0 flex-1 py-1.5">
<div class="text-sm text-gray-500">
<span class="font-medium text-gray-900">A private Strider</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="user_31601" class="w-full max-w-lg p-2 transition duration-150 rounded-lg shadow-md bg-gradient-to-br from-gray-50 to-gray-200">
<div class="flex">
<img loading="lazy" class="flex-none text-xs rounded-full h-16 w-16 mr-2" alt="" src="https://www.gravatar.com/avatar/17a534745e70297382cc25b22903e611?d=https%3A%2F%2Fcitystrides.com%2Fassets%2Flogo_menu-4dc9d8eddd18724d2784165652c6ca07b47443b447fba88a84a4adc856d3605b.png">
<div class="flex-grow text-left">
<h2 class="overflow-hidden text-sm font-bold text-gray-900 truncate">Elliot Nolan</h2>
<div class="text-xs uppercase">1611 streets</div>
</div>
</div>
<div class="flex justify-between mt-5 text-sm">
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/31601/map">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
LifeMap
</a> </div>
<div>
<a data-turbo-frame="_top" class="purple-button flex items-center" href="/users/31601">
<svg class="float-left w-6 h-6 mr-1" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox="0 0 24 24" stroke="currentColor"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
Profile
</a> </div>
</div>
</div>
<div class="w-full">
<div class="flow-root">
<div class="relative">
<div class="relative flex items-start space-x-3">
<div>
<div class="relative">
<div class="flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full ring-8 ring-white">
<svg class="w-5 h-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
<div class="min-w-0 flex-1 py-1.5">
<div class="text-sm text-gray-500">
<span class="font-medium text-gray-900">A private Strider</span>
</div>
</div>
</div>
</div>
</div>
</div>
the element/div you are looking for with class w-full and py-1 are actually not there in the source of the website, I just tried to inspect and could not find them,can you see them when you open that website on your browser?
I'm using TailwindCSS, TailwindUI and StencilJS to build a dropdown TailwindUI component, but i'm having difficulty figuring out how to apply the suggested transitions provided next to the tailwind UI component.
Here is the tailwindUI component:
<div class="relative inline-block text-left">
<div>
<span class="rounded-md shadow-sm">
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
Options
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</span>
</div>
<!--
Dropdown panel, show/hide based on dropdown 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="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg">
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1">
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/>
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"/>
</svg>
Edit
</a>
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z"/>
<path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z"/>
</svg>
Duplicate
</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"/>
<path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd"/>
</svg>
Archive
</a>
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"/>
</svg>
Move
</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"/>
</svg>
Share
</a>
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
</svg>
Add to favorites
</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
Delete
</a>
</div>
</div>
</div>
</div>
and here is my attempt to create that same component (and animation) in a StencilJS tsx class and css file:
import { Component, h, State } from '#stencil/core';
#Component({
tag: 'animate-ex',
styleUrl: 'animate-ex.css'
})
export class AnimateEx {
#State() isOpen = false;
setIsOpen(isOpen: boolean): void {
this.isOpen = isOpen;
}
render() {
return (
<div id="tw-dropdown" class=" ml-1/3 mt-5 relative inline-block text-left">
<div>
<span class="rounded-md shadow-sm">
<button type="button" onClick={() => this.setIsOpen(!this.isOpen)} class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
Options
<svg class="-mr-1 ml-2 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</span>
</div>
<div id='TRANSITION_HERE' class={(this.isOpen?'show transition ease-out duration-100 transform opacity-100 scale-100 ':'hide transition ease-in duration-75 transform opacity-0 scale-95 ')+'drop-down-content origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg'}>
<div class="rounded-md bg-white shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1">
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/>
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"/>
</svg>
Edit
</a>
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z"/>
<path d="M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z"/>
</svg>
Duplicate
</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"/>
<path fill-rule="evenodd" d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd"/>
</svg>
Archive
</a>
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"/>
</svg>
Move
</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"/>
</svg>
Share
</a>
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/>
</svg>
Add to favorites
</a>
</div>
<div class="border-t border-gray-100"></div>
<div class="py-1">
<a href="#" class="group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<svg class="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
Delete
</a>
</div>
</div>
</div>
</div>
);
}
}
.hide {
display: none;
}
The div with id=TRANSITION_HERE is where, I think, the transition goes, but I can't determine what is meant by entering/leaving here, and the only references I can find are for Vue and React frameworks, which I'm not using.
I stumbled upon a package called 'el-transition' - it worked like a charm and really nicely works with the way tailwindUI expresses animations (similar to alpine.js from what I understand).
https://www.npmjs.com/package/el-transition
Use the following properties to set the animations:
data-transtion-enter: Applied during the entire entering phase.
data-transition-enter-start: Added before element is inserted, removed one frame after element is inserted.
data-transition-enter-end: Added one frame after element is inserted (at the same time enter-start is removed), removed when transition/animation finishes.
data-transition-leave: Applied during the entire leaving phase.
data-transition-leave-start: Added immediately when a leaving transition is triggered, removed after one frame.
data-transition-leave-end: Added one frame after a leaving transition is triggered (at the same time leave-start is removed), removed when the transition/animation finishes.
Save the elements with the properties using ref={(elRef)=>this.elRef=elRef}
Call enter() or leave() on each of the ref(s) saved that require transition
I ended up using this library for a different component but if it's helpful I change the original answer's code and post the component I did use this for.