title: Alpine.js how to fade in and out message?
body: <p>I have this Bootstrap alert message auto hide with x-init but I also want it to fade in and then out. How can I do that with Alpine js?</p>
  <pre><code>&lt;script defer src=&quot;https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js&quot;&gt;&lt;/script&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-6 offset-md-3&quot;&gt;
        &lt;div id=&quot;messages&quot;&gt;
          &lt;div x-data=&quot;{ show: true }&quot; x-show=&quot;show&quot; x-init=&quot;setTimeout(() =&gt; show = false, 1500)&quot; x-transition&gt;
            &lt;div class=&quot;alert alert-dismissible fade show&quot; role=&quot;alert&quot;&gt;
              Message
              &lt;button type=&quot;button&quot; class=&quot;btn-close btn-sm&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>