<div x-data="{ isVisible: false }">
    <button @click="isVisible = !isVisible">Toggle</button>
    <div x-show="isVisible" x-transition style="background: lightblue; padding: 10px;">
        <p>This content appears with a transition!</p>
    </div>
</div>

<style>
    .enter {
        opacity: 0;
        transform: scale(0.9);
    }
    .enter-active {
        transition: all 0.3s ease-out;
    }
    .enter-to {
        opacity: 1;
        transform: scale(1);
    }
    .leave {
        opacity: 1;
        transform: scale(1);
    }
    .leave-active {
        transition: all 0.3s ease-out;
    }
    .leave-to {
        opacity: 0;
        transform: scale(0.9);
    }
</style>

<div x-data="{ isVisible: false }">
    <button @click="isVisible = !isVisible">Toggle</button>
    <div x-show="isVisible" 
         x-transition:enter="enter" 
         x-transition:enter-start="enter" 
         x-transition:enter-end="enter-to" 
         x-transition:leave="leave" 
         x-transition:leave-start="leave" 
         x-transition:leave-end="leave-to"
         style="background: lightblue; padding: 10px;">
        <p>This content has a custom transition!</p>
    </div>
</div>

<div x-data="{ isVisible: false }">
    <button @click="isVisible = !isVisible">Toggle</button>
    <div x-show="isVisible" x-transition.duration.500ms style="background: lightgreen; padding: 10px;">
        <p>This content fades in and out over 500ms!</p>
    </div>
</div>

<div x-data="{ isVisible: false }">
    <button @click="isVisible = !isVisible">Toggle</button>
    <div x-show="isVisible" x-transition.delay.300ms style="background: lightcoral; padding: 10px;">
        <p>This content appears with a 300ms delay!</p>
    </div>
</div>

<style>
    .fade {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .fade-in {
        opacity: 1;
    }
</style>

<div x-data="{ isModalOpen: false }">
    <button @click="isModalOpen = true">Open Modal</button>
    
    <!-- Overlay -->
    <div x-show="isModalOpen" 
         x-transition:enter="fade" 
         x-transition:enter-end="fade-in" 
         x-transition:leave="fade-in" 
         x-transition:leave-end="fade"
         style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);">
    </div>

    <!-- Modal -->
    <div x-show="isModalOpen" 
         x-transition 
         style="background: white; padding: 20px; max-width: 400px; margin: 50px auto; position: relative;">
        <h2>Modal Title</h2>
        <p>This is the modal content.</p>
        <button @click="isModalOpen = false">Close</button>
    </div>
</div>