-
Notifications
You must be signed in to change notification settings - Fork 1
/
x.astro
106 lines (102 loc) · 2.24 KB
/
x.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
---
import XElement from 'astro-xelement'
import { Fx } from 'p13rnd-anifx';
const {
type = 'span',
class: classList = '',
style: styles = '',
easing = 'linear',
duration = 1500,
fill = 'both',
gradient = '',
direction = "normal",
iterations = 1,
delay = "0",
fullNode = "true",
delayBetween = 0,
clean = "true",
retain = "false",
trigger = "visible",
animations = ""
} = Astro.props;
const fx = new Fx();
const t = {
duration: parseInt(duration),
easing: easing,
fill: fill,
direction: direction,
iterations: parseInt(iterations),
delay: parseInt(delay)
};
let styleSet = styles;
if ('' !== gradient) {
styleSet = `
background: linear-gradient(${gradient});
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
` + styles;
}
const animate = (target, fx) => {
target.isAnimating = true;
fx.animateNode(target, {
animationString: animations,
timing: timing,
split: !JSON.parse(fullNode),
clean: JSON.parse(clean),
retain: retain,
delayBetweenLetters: parseInt(delayBetween)
});
}
---
<XElement @is={type}
style={styleSet}
class={classList}
define:vars={
{
animate,
fullNode,
animations,
timing: t,
clean: clean,
retain: retain,
trigger,
delayBetween: delayBetween,
f: fx
}
}
@visible={(event)=> {
if (true != event.target.isAnimating) {
if ('' !== animations && trigger.search('visibleonce') < 0 && trigger.search('visible') > -1) {
animate(event.target, f);
}
}
}}
@visible:once={(event)=> {
if (true != event.target.isAnimating) {
if ('' !== animations && trigger.search('visibleonce') > -1) {
animate(event.target, f);
}
}
}}
@click={(event)=> {
if (true != event.target.isAnimating) {
if ('' !== animations && trigger.search('click') > -1) {
animate(event.target, f);
}
}
}}
@mouseenter={(event)=> {
if (true != event.target.isAnimating) {
if ('' !== animations && trigger.search('mouseenter') > -1 && trigger.search('mouseleave') < 0) {
animate(event.target, f);
}
}
}}
@mouseleave={(event)=> {
if (true != event.target.isAnimating) {
if ('' !== animations && trigger.search('mouseleave') > -1 && trigger.search('mouseenter') < 0) {
animate(event.target, f);
}
}
}}
><slot/></XElement>