點燈坊

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

Using x-transition to Support CSS Transition

Sam Xiao's Avatar 2022-01-13

We often use x-show to control the element to show or hide. With x-transition we can apply the visual effect for x-show.

Version

Alpine 3.9

x-transition

toggle000

Toggle Hello World by CSS transition with 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>
    <title>Alpine</title>
  </head>
  <body x-data="{ isShow: true }">
    <button @click="isShow = !isShow">Toggle</button>
    <div x-show="isShow" x-transition.duration.500ms>Hello World</div>
  </body>
</html>

Line 11

<body x-data="{ isShow: true }">
  <button @click="isShow = !isShow">Toggle</button>
  <div x-show="isShow" x-transition.duration.500ms>Hello World</div>
</body>
  • x-data : toggle isShow state to show Hello World
  • x-show : show or hide by isShow state
  • x-transition.duration.500ms : CSS transition by 500ms duration

Conclusion

  • We don’t have to use any CSS or TailwindCSS utilities for CSS transition with duration. Just use x-transition.duration with a specified duration time

Reference

Alpine, x-transition

# Alpine