Skip to content

Commit 74fd73f

Browse files
BeksOmegagoogle-labs-jules[bot]
BeksOmega
and
google-labs-jules[bot]
authored
Feature/animated hide (#1)
* feat: Add animation to hide method This change introduces an animation to the `hide()` method, making the annotation disappear with a reverse animation of the `show()` method. Previously, `hide()` would immediately remove the annotation's SVG elements from the DOM. This change modifies the `hide()` method to: - Play the `show()` animation in reverse. - Use `requestAnimationFrame` to ensure the animation restart is smooth. - Use `setTimeout` to remove the SVG elements only after the animation has completed. This prevents race conditions when `show()` is called again while a `hide()` animation is in progress. This addresses issue #57. * feat(demo): Add demo.html for local testing This commit adds a `demo.html` file to showcase the animated `hide()` functionality. This allows for easy local testing and verification of the feature. * fixup implementation to actually work * remove console log --------- Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
1 parent 668ba82 commit 74fd73f

File tree

5 files changed

+479
-181
lines changed

5 files changed

+479
-181
lines changed

‎demo.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Rough Notation Demo</title>
5+
<style>
6+
body {
7+
font-family: sans-serif;
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
justify-content: center;
12+
height: 100vh;
13+
margin: 0;
14+
}
15+
#annotated-text {
16+
font-size: 2em;
17+
padding: 20px;
18+
border: 1px solid #ccc;
19+
cursor: pointer;
20+
}
21+
.instructions {
22+
margin-top: 20px;
23+
font-size: 1em;
24+
color: #555;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div id="annotated-text">Click me to toggle the annotation.</div>
30+
31+
<div class="instructions">
32+
This demo shows the animated `hide()` method.
33+
</div>
34+
35+
<script src="lib/rough-notation.iife.js"></script>
36+
<script>
37+
const { annotate } = RoughNotation;
38+
39+
const el = document.getElementById("annotated-text");
40+
const annotation = annotate(el, {
41+
type: "underline",
42+
color: "red",
43+
animationDuration: 1000,
44+
animateOnHide: true,
45+
});
46+
47+
el.addEventListener("click", () => {
48+
if (annotation.isShowing()) {
49+
annotation.hide();
50+
} else {
51+
annotation.show();
52+
}
53+
});
54+
55+
// Initially show the annotation
56+
annotation.show();
57+
</script>
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)