<style>
    .custom-enter {
        opacity: 0;
        transform: translateY(-10px);
    }
    .custom-enter-active {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.3s ease-out;
    }
    .custom-leave {
        opacity: 1;
        transform: translateY(0);
    }
    .custom-leave-active {
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease-in;
    }
</style>

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

<div x-data="{ isVisible: false }">
    <button @click="isVisible = !isVisible">Toggle</button>
    <div x-show="isVisible"
         x-transition:enter-start="$el.style.opacity = 0; $el.style.transform = 'scale(0.95)';"
         x-transition:enter="$el.style.transition = 'all 0.5s';"
         x-transition:enter-end="$el.style.opacity = 1; $el.style.transform = 'scale(1)';"
         x-transition:leave-start="$el.style.opacity = 1; $el.style.transform = 'scale(1)';"
         x-transition:leave="$el.style.transition = 'all 0.5s';"
         x-transition:leave-end="$el.style.opacity = 0; $el.style.transform = 'scale(0.95)';"
         style="background: lightgreen; padding: 10px;">
        <p>This content has a custom JavaScript transition!</p>
    </div>
</div>

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

<div x-data="{ isModalOpen: false }">
    <button @click="isModalOpen = true">Open Modal</button>

    <!-- Overlay -->
    <div x-show="isModalOpen"
         x-transition:enter="overlay"
         x-transition:enter-end="overlay-active"
         x-transition:leave="overlay-active"
         x-transition:leave-end="overlay"
         style="background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%;"></div>

    <!-- Modal -->
    <div x-show="isModalOpen"
         x-transition:enter="modal"
         x-transition:enter-end="modal-active"
         x-transition:leave="modal-active"
         x-transition:leave-end="modal"
         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>