點燈坊

失くすものさえない今が強くなるチャンスよ

Using duration with transition

Sam Xiao's Avatar 2022-01-08

When using transtion for CSS Transition, we can add duration to achieve a more obvious visual effect.

Version

TailwindCSS 3.0

duration

duration000

Toggle the element with transition and duration

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/alpinejs" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body x-data="{ isShow: true }">
  <button class="text-gray-800 bg-gray-200 rounded-lg px-3 py-1" @click="isShow = !isShow">Toggle</button>
  <div class="transition duration-500" :class="isShow || '-translate-x-full'">TailwindCSS</div>
</body>
</html>

Line 10

<body x-data="{ isShow: true }">
  • isShow : control showing the element or not

Line 11

<button class="text-gray-800 bg-gray-200 rounded-lg px-3 py-1" @click="isShow = !isShow">Toggle</button>

<button> to toggle isShow state.

Line 12

<div class="transition duration-500" :class="isShow || '-translate-x-full'">TailwindCSS</div>
  • -transition-x-full : if isShow is false, move the element outside of the current page
  • transition duration-500 : use CSS transition to slow down the toggling effect

Conclusion

  • We can use -translate-x-full or -translate-y-full to hide the element with transition duration for more obvious visual effect

Reference

TailwindCSS, Transition Duration

# TailwindCSS