element-plus/docs/examples/tooltip-v2/transition.vue
sea ade87f6729
docs(examples): standardize unified code format and fix some type (#16370)
* docs: standardize unified example code format and fix some example type

* docs:  update some example type

* Update docs/examples/descriptions/sizes.vue

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* docs: update example-page-header

* docs: update example-page-header

---------

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
2024-04-15 16:29:21 +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>