Skip to content

Commit a47700f

Browse files
jlukicjlukic
committed
Docs: work on transition example
1 parent 2ba9ccc commit a47700f

File tree

3 files changed

+85
-32
lines changed

3 files changed

+85
-32
lines changed

‎docs/src/examples/query/plugins/query-transition-behavior/page.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
.group {
2+
display: flex;
3+
flex-direction: row;
4+
gap: 1rem;
5+
padding: 1rem;
6+
border: var(--border);
7+
background-color: var(--standard-5);
8+
9+
select {
10+
border: var(--border);
11+
background-color: var(--standard-10);
12+
color: var(--text-color);
13+
border-radius: var(--border-radius);
14+
padding: 3px 8px;
15+
16+
option {
17+
color: var(--inverted-80);
18+
}
19+
}
20+
ui-input {
21+
width: 100%;
22+
}
23+
}
24+
25+
126
.box {
227
background: var(--primary-0) var(--angled-gradient);
328
border: var(--border);

‎docs/src/examples/query/plugins/query-transition-behavior/page.html‎

Lines changed: 43 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,45 @@
1-
<select>
2-
<option value="bounce">Bounce</option>
3-
<option value="fade">Fade</option>
4-
<option value="fade-up">Fade Up</option>
5-
<option value="cross-fade">Cross Fade</option>
6-
<option value="scale" default>Scale</option>
7-
<option value="vertical-scale">Vertical Scale</option>
8-
<option value="scale-top">Scale Top</option>
9-
<option value="scale-bottom">Scale Bottom</option>
10-
<option value="scale-left">Scale Left</option>
11-
<option value="scale-right">Scale Right</option>
12-
<option value="slide-left">Slide Left</option>
13-
<option value="slide-right">Slide Right</option>
14-
<option value="slide-up">Slide Up</option>
15-
<option value="slide-down">Slide Down</option>
16-
<option value="flip">Flip</option>
17-
<option value="horizontal-flip">Horizontal Flip</option>
18-
<option value="vertical-flip">Vertical Flip</option>
19-
<option value="draw">Draw</option>
20-
<option value="toggle">Toggle</option>
21-
<option value="expand">Expand</option>
22-
<option value="stagger">Stagger</option>
23-
<option value="spin">Spin</option>
24-
<option value="shake">Shake</option>
25-
<option value="glow">Glow</option>
26-
<option value="shimmer">Shimmer</option>
27-
<option value="progress">Progress</option>
28-
</select>
1+
<div class="group">
2+
<ui-button primary>Transition</ui-button>
3+
<select class="animation">
4+
<option value="bounce">Bounce</option>
5+
<option value="fade">Fade</option>
6+
<option value="fade-up">Fade Up</option>
7+
<option value="cross-fade">Cross Fade</option>
8+
<option value="scale" default>Scale</option>
9+
<option value="vertical-scale">Vertical Scale</option>
10+
<option value="scale-top">Scale Top</option>
11+
<option value="scale-bottom">Scale Bottom</option>
12+
<option value="scale-left">Scale Left</option>
13+
<option value="scale-right">Scale Right</option>
14+
<option value="slide-left">Slide Left</option>
15+
<option value="slide-right">Slide Right</option>
16+
<option value="slide-up">Slide Up</option>
17+
<option value="slide-down">Slide Down</option>
18+
<option value="flip">Flip</option>
19+
<option value="horizontal-flip">Horizontal Flip</option>
20+
<option value="vertical-flip">Vertical Flip</option>
21+
<option value="draw">Draw</option>
22+
<option value="toggle">Toggle</option>
23+
<option value="expand">Expand</option>
24+
<option value="stagger">Stagger</option>
25+
<option value="spin">Spin</option>
26+
<option value="shake">Shake</option>
27+
<option value="glow">Glow</option>
28+
<option value="shimmer">Shimmer</option>
29+
<option value="progress">Progress</option>
30+
</select>
31+
<ui-input fluid class="duration" placeholder='duration'></ui-input>
32+
<ui-input fluid class="interval" placeholder="interval"></ui-input>
33+
<select class="direction">
34+
<option value="auto">Auto</option>
35+
<option value="forward">Forward</option>
36+
<option value="reverse">Reverse</option>
37+
</select>
38+
</div>
2939
<br>
30-
<ui-button>Toggle Visibility</ui-button>
3140
<br>
32-
<div class="box" style="display: none;">Box</div>
41+
<div class="group">
42+
<div class="box">Box</div>
43+
<div class="box">Box</div>
44+
<div class="box">Box</div>
45+
</div>

‎docs/src/examples/query/plugins/query-transition-behavior/page.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,21 @@ import { Transition } from '@semantic-ui/core';
22
import { $ } from '@semantic-ui/query';
33

44
$('ui-button').on('click', () => {
5-
const animation = $('select').val();
6-
$('.box').transition(animation);
5+
const animation = $('.animation').val();
6+
const direction = $('.direction').val();
7+
const duration = $('.duration').val() || 'auto';
8+
const interval = $('.interval').val();
9+
10+
console.log({
11+
animation,
12+
direction,
13+
duration,
14+
interval,
15+
});
16+
$('.box').transition({
17+
animation,
18+
direction,
19+
duration,
20+
interval,
21+
});
722
});

0 commit comments

Comments
 (0)