element-plus/docs/examples/tooltip-v2/transition.vue
JeremyWuuuuu f576d5a57b
feat(components): [tooltip-v2] documentation (#6870)
- Add tooltip-v2 documentation
- Complete tooltip-v2 implementation
2022-03-29 15:12:10 +08:00

34 lines
670 B
Vue

<template>
<!-- eslint-disable vue/require-toggle-inside-transition -->
<el-tooltip-v2 aria-label="content" placement="top" content-class="scale-in">
<template #trigger>
<el-button circle
><el-icon><Plus /></el-icon
></el-button>
</template>
<div>content</div>
</el-tooltip-v2>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
</script>
<style>
@keyframes scale-in {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.el-tooltip-v2__content.scale-in {
animation: scale-in var(--el-transition-duration) ease-out forwards;
}
</style>