Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
f98ab422
Commit
f98ab422
authored
May 26, 2016
by
Nick Stenning
Browse files
Options
Browse Files
Download
Plain Diff
Merge pull request #3346 from hypothesis/adder-enter-animation
Add enter/exit animation when adder is shown
parents
f038cfc2
55ad6a05
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
47 additions
and
0 deletions
+47
-0
adder.js
h/static/scripts/annotator/adder.js
+8
-0
adder-test.js
h/static/scripts/annotator/test/adder-test.js
+1
-0
adder.scss
h/static/styles/annotator/adder.scss
+38
-0
No files found.
h/static/scripts/annotator/adder.js
View file @
f98ab422
...
@@ -39,6 +39,7 @@ function Adder(element) {
...
@@ -39,6 +39,7 @@ function Adder(element) {
this
.
element
=
element
;
this
.
element
=
element
;
var
view
=
element
.
ownerDocument
.
defaultView
;
var
view
=
element
.
ownerDocument
.
defaultView
;
var
enterTimeout
;
// Set initial style. The adder is hidden using the `visibility`
// Set initial style. The adder is hidden using the `visibility`
// property rather than `display` so that we can compute its size in order to
// property rather than `display` so that we can compute its size in order to
...
@@ -56,6 +57,8 @@ function Adder(element) {
...
@@ -56,6 +57,8 @@ function Adder(element) {
/** Hide the adder */
/** Hide the adder */
this
.
hide
=
function
()
{
this
.
hide
=
function
()
{
clearTimeout
(
enterTimeout
);
element
.
className
=
classnames
({
'annotator-adder'
:
true
});
element
.
style
.
visibility
=
'hidden'
;
element
.
style
.
visibility
=
'hidden'
;
};
};
...
@@ -131,6 +134,11 @@ function Adder(element) {
...
@@ -131,6 +134,11 @@ function Adder(element) {
element
.
style
.
top
=
toPx
(
top
);
element
.
style
.
top
=
toPx
(
top
);
element
.
style
.
left
=
toPx
(
left
);
element
.
style
.
left
=
toPx
(
left
);
element
.
style
.
visibility
=
'visible'
;
element
.
style
.
visibility
=
'visible'
;
clearTimeout
(
enterTimeout
);
enterTimeout
=
setTimeout
(
function
()
{
element
.
className
+=
' is-active'
;
},
1
);
};
};
}
}
...
...
h/static/scripts/annotator/test/adder-test.js
View file @
f98ab422
...
@@ -18,6 +18,7 @@ describe('adder', function () {
...
@@ -18,6 +18,7 @@ describe('adder', function () {
});
});
afterEach
(
function
()
{
afterEach
(
function
()
{
adderCtrl
.
hide
();
adderCtrl
.
element
.
parentNode
.
removeChild
(
adderCtrl
.
element
);
adderCtrl
.
element
.
parentNode
.
removeChild
(
adderCtrl
.
element
);
});
});
...
...
h/static/styles/annotator/adder.scss
View file @
f98ab422
$adder-transition-duration
:
80ms
;
.annotator-adder
{
.annotator-adder
{
// Adder entry animation settings
animation-duration
:
$adder-transition-duration
;
animation-timing-function
:
ease-in
;
animation-fill-mode
:
forwards
;
box-sizing
:
border-box
;
box-sizing
:
border-box
;
direction
:
ltr
;
direction
:
ltr
;
position
:
absolute
;
position
:
absolute
;
...
@@ -7,6 +14,26 @@
...
@@ -7,6 +14,26 @@
border-radius
:
4px
;
border-radius
:
4px
;
box-shadow
:
0px
0px
4px
0px
rgba
(
0
,
0
,
0
,
0
.15
);
box-shadow
:
0px
0px
4px
0px
rgba
(
0
,
0
,
0
,
0
.15
);
z-index
:
999
;
z-index
:
999
;
// Give the adder a very low opacity initially. It will then fade-in when
// shown.
opacity
:
0
.05
;
}
@keyframes
adder-fade-in
{
0
%
{
opacity
:
0
.05
;
}
20
%
{
opacity
:
0
.7
;
}
100
%
{
opacity
:
1
.0
;
}
}
@keyframes
adder-pop-up
{
from
{
transform
:
scale
(
0
.8
)
translateY
(
10px
);
}
to
{
transform
:
scale
(
1
.0
)
translateY
(
0px
);
}
}
@keyframes
adder-pop-down
{
from
{
transform
:
scale
(
0
.8
)
translateY
(
-10px
);
}
to
{
transform
:
scale
(
1
.0
)
translateY
(
0px
);
}
}
}
@mixin
adder-arrow
(
$rotation
)
{
@mixin
adder-arrow
(
$rotation
)
{
...
@@ -25,11 +52,19 @@
...
@@ -25,11 +52,19 @@
width
:
6px
;
width
:
6px
;
}
}
.annotator-adder--arrow-down.is-active
{
animation-name
:
adder-fade-in
,
adder-pop-up
;
}
.annotator-adder--arrow-down
:before
{
.annotator-adder--arrow-down
:before
{
@include
adder-arrow
(
45deg
);
@include
adder-arrow
(
45deg
);
bottom
:
-5px
;
bottom
:
-5px
;
}
}
.annotator-adder--arrow-up.is-active
{
animation-name
:
adder-fade-in
,
adder-pop-down
;
}
.annotator-adder--arrow-up
:before
{
.annotator-adder--arrow-up
:before
{
@include
adder-arrow
(
225deg
);
@include
adder-arrow
(
225deg
);
top
:
-5px
;
top
:
-5px
;
...
@@ -60,6 +95,8 @@
...
@@ -60,6 +95,8 @@
padding-bottom
:
6px
;
padding-bottom
:
6px
;
padding-left
:
10px
;
padding-left
:
10px
;
padding-right
:
10px
;
padding-right
:
10px
;
transition
:
color
$adder-transition-duration
;
}
}
.annotator-adder-actions
.annotator-adder-actions__button
:hover
{
.annotator-adder-actions
.annotator-adder-actions__button
:hover
{
...
@@ -75,4 +112,5 @@
...
@@ -75,4 +112,5 @@
margin
:
2px
0px
;
margin
:
2px
0px
;
font-family
:
sans-serif
;
font-family
:
sans-serif
;
color
:
$gray-light
!
important
;
color
:
$gray-light
!
important
;
transition
:
color
$adder-transition-duration
;
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment