marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Pause animation when hovering

Browse Source
This commit is contained in:
Sidharth Vinod
2025-05-20 15:17:56 +05:30
parent 14e3d77c75
commit 51f0cb2892
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/mermaid/src/docs/.vitepress/components/TopBar.vue
View File

@@ -19,15 +19,15 @@ const taglines: Taglines[] = [
const randomTagLines: Taglines[] = [
{
label: 'Customize your layout and design in Mermaid Chart’s whiteboard!',
label: "Customize your layout and design in Mermaid Chart's whiteboard!",
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=whiteboard',
},
{
label: 'Customize your layout and design in Mermaid Chart’s visual editor!',
label: "Customize your layout and design in Mermaid Chart's visual editor!",
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
},
{
label: 'Customize your layout and design with Mermaid Chart’s GUI!',
label: "Customize your layout and design with Mermaid Chart's GUI!",
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=gui',
},
{
@@ -38,19 +38,27 @@ const randomTagLines: Taglines[] = [
const index: Ref<number> = ref(0);
const currentBannerSet: Ref<Taglines[]> = ref(taglines);
const isPaused: Ref<boolean> = ref(false);
onMounted(() => {
const newIndex = Math.floor(Math.random() * randomTagLines.length);
currentBannerSet.value = [...taglines, randomTagLines[newIndex]];
index.value = Math.floor(Math.random() * currentBannerSet.value.length);
setInterval(() => {
if (isPaused.value) {
return;
}
index.value = (index.value + 1) % currentBannerSet.value.length;
}, 5_000);
});
</script>
<template>
<div class="mb-4 w-full top-bar flex p-2 bg-[#E0095F]">
<div
class="mb-4 w-full top-bar flex p-2 bg-[#E0095F]"
@mouseenter="isPaused = true"
@mouseleave="isPaused = false"
>
<p class="w-full tracking-wide fade-text text-sm">
<transition name="fade" mode="out-in">
<a