<template>
  <div>
    <button @click="flag=!flag">切换</button>
    <p></p>
    <transition
        name="fade"
        enter-active-class="animate__animated animate__zoomIn" 
        leave-active-class="animate__animated  animate__zoomOut"
    >
    <dialog-box v-if="flag" width='600px'>
        <template v-slot:header>
          <!-- <span>数据详情</span> -->
        </template>
        <template v-slot:inner>
            <div>
                汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉
            </div>
            <div>
                <button @click="flag=!flag">123</button>
            </div>
        </template>
    </dialog-box>
      <!-- <img :src="pic" alt="" style="width: 200px;height: 300px" v-if="flag"> -->
    </transition>
  </div>
</template>

<script>
import dialogBox from './dialog'

export default {
  name: "TransitionAndAnimateThree",
  components: {dialogBox},
  data() {
    return {
      // pic: pic,
      flag: false,
    }
  }
}
</script>

<style scoped>
</style>
