<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">Toggle Slide + Fade</button>
  <Transition name="fade">
    <p v-if="show">hello</p>
    <div v-if="show">p_message</div>

    <div v-if="show" class="test" @click="hideToast">
      <div>{{ 'aaaa' }}</div>
    </div>
  </Transition>
</template>

<style>
.test {
  padding: 10px;
  font-size: 16px;
  color: #333;
  background-color: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  margin: 10px;
}
.fade-enter-active {
  transition: opacity 1s ease;
}
.fade-enter-from {
  opacity: 0;
}
.fade-leave-active {
  transition: opacity 1s ease;
}

.fade-leave-to {
  opacity: 0;
}
</style>
