Skip to content

Commit c1de04f

Browse files
Blake Stephensaarontam
Blake Stephens
authored and
aarontam
committed
ENYO-4889: Added new timing functions to Transition… (#1290)
* ENYO-4889: Added new timing functions to Transition and updated ExpandableItem to use them Enact-DCO-1.0-Signed-off-by: Blake Stephens <blake.stephens@lge.com> * Corrected the ease-in-quart function numbers, logically rearranged order of functions, added new functions to tests. Enact-DCO-1.0-Signed-off-by: Blake Stephens <blake.stephens@lge.com> * Updates change log entry * Adds placeholder change log entries and fixes up entries * Fix bad auto merge * Fixes more bad auto merge Reviewed-By: Jeremy Thomas (jeremy.thomas@lge.com) Integrated-By: Aaron Tam (aaron.tam@lge.com)
1 parent f62e2fc commit c1de04f

File tree

11 files changed

+113
-11
lines changed

11 files changed

+113
-11
lines changed

‎packages/core/CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
The following is a curated list of changes in the Enact core module, newest changes on the top.
44

5+
## [unreleased]
6+
7+
### Added
8+
9+
### Changed
10+
11+
### Fixed
12+
513
## [1.12.2] - 2017-11-15
614

715
No significant changes.

‎packages/i18n/CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
The following is a curated list of changes in the Enact i18n module, newest changes on the top.
44

5+
## [unreleased]
6+
7+
### Added
8+
9+
### Changed
10+
11+
### Fixed
12+
513
## [1.12.2] - 2017-11-15
614

715
No significant changes.

‎packages/moonstone/CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
The following is a curated list of changes in the Enact moonstone module, newest changes on the top.
44

5+
## [unreleased]
6+
7+
### Added
8+
9+
### Changed
10+
11+
### Fixed
12+
13+
- `moonstone/Expandable` and derivatives to use the new `ease-out-quart` animation timing function to better match the aesthetic of Enyo's Expandables
14+
515
## [1.12.2] - 2017-11-15
616

717
### Fixed

‎packages/moonstone/ExpandableItem/ExpandableItem.js

+1
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,7 @@ const ExpandableItemBase = kind({
345345
<ExpandableTransitionContainer
346346
data-expandable-container
347347
duration="short"
348+
timingFunction="ease-out-quart"
348349
onHide={onHide}
349350
onKeyDown={handleKeyDown}
350351
onShow={onShow}

‎packages/sampler/CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
The following is a curated list of changes in the Enact Sampler, newest changes on the top.
44

5+
## [unreleased]
6+
7+
### Added
8+
9+
### Changed
10+
11+
### Fixed
12+
513
## [1.12.2] - 2017-11-15
614

715
No significant changes.

‎packages/spotlight/CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
The following is a curated list of changes in the Enact spotlight module, newest changes on the top.
44

5+
## [unreleased]
6+
7+
### Added
8+
9+
### Changed
10+
11+
### Fixed
12+
513
## [1.12.2] - 2017-11-15
614

715
### Fixed

‎packages/ui/CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
The following is a curated list of changes in the Enact ui module, newest changes on the top.
44

5+
## [unreleased]
6+
7+
### Added
8+
9+
- `ui/Transition` animation timing functions `ease-in`, `ease-out`, `ease-in-quart`, and `ease-out-quart` to provide prettier options for transitions that may be more suited to a specific visual style
10+
11+
### Changed
12+
13+
### Fixed
14+
515
## [1.12.2] - 2017-11-15
616

717
### Fixed

‎packages/ui/Transition/Transition.js

+23-6
Original file line numberDiff line numberDiff line change
@@ -82,14 +82,22 @@ const TransitionBase = kind({
8282

8383
/**
8484
* Customize the transition timing function.
85-
* Supported functions are: linear, ease. ease-in-out is the default when none others are
86-
* specified.
85+
* Supported function names are: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-quart`,
86+
* `ease-out-quart`, and `linear`.
8787
*
8888
* @type {String}
8989
* @default 'ease-in-out'
9090
* @public
9191
*/
92-
timingFunction: PropTypes.oneOf(['ease-in-out', 'ease', 'linear']),
92+
timingFunction: PropTypes.oneOf([
93+
'ease',
94+
'ease-in',
95+
'ease-out',
96+
'ease-in-out',
97+
'ease-in-quart',
98+
'ease-out-quart',
99+
'linear'
100+
]),
93101

94102
/**
95103
* Choose how you'd like the transition to affect the content.
@@ -240,14 +248,23 @@ class Transition extends React.Component {
240248
onShow: PropTypes.func,
241249

242250
/**
243-
* The transition timing function.
244-
* Supported functions are: `'linear'`, `'ease'` and `'ease-in-out'`
251+
* Customize the transition timing function.
252+
* Supported function names are: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-quart`,
253+
* `ease-out-quart`, and `linear`.
245254
*
246255
* @type {String}
247256
* @default 'ease-in-out'
248257
* @public
249258
*/
250-
timingFunction: PropTypes.oneOf(['ease-in-out', 'ease', 'linear']),
259+
timingFunction: PropTypes.oneOf([
260+
'ease',
261+
'ease-in',
262+
'ease-out',
263+
'ease-in-out',
264+
'ease-in-quart',
265+
'ease-out-quart',
266+
'linear'
267+
]),
251268

252269
/**
253270
* How the transition affects the content.

‎packages/ui/Transition/Transition.less

+23-3
Original file line numberDiff line numberDiff line change
@@ -131,14 +131,34 @@
131131
}
132132

133133
// Timing Functions
134+
&.ease,
135+
&.ease .inner {
136+
transition-timing-function: ease;
137+
}
138+
139+
&.ease-in,
140+
&.ease-in .inner {
141+
transition-timing-function: ease-in;
142+
}
143+
144+
&.ease-out,
145+
&.ease-out .inner {
146+
transition-timing-function: ease-out;
147+
}
148+
134149
&.ease-in-out,
135150
&.ease-in-out .inner {
136151
transition-timing-function: ease-in-out;
137152
}
138153

139-
&.ease,
140-
&.ease .inner {
141-
transition-timing-function: ease;
154+
&.ease-in-quart,
155+
&.ease-in-quart .inner {
156+
transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
157+
}
158+
159+
&.ease-out-quart,
160+
&.ease-out-quart .inner {
161+
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
142162
}
143163

144164
&.linear,

‎packages/ui/Transition/tests/Transition-specs.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,12 @@ describe('Transition Specs', () => {
5858
];
5959

6060
const timingFunctionCombination = [
61-
[css['ease-in-out'], 'ease-in-out'],
6261
[css.ease, 'ease'],
62+
[css['ease-in'], 'ease-in'],
63+
[css['ease-out'], 'ease-out'],
64+
[css['ease-in-out'], 'ease-in-out'],
65+
[css['ease-in-quart'], 'ease-in-quart'],
66+
[css['ease-out-quart'], 'ease-out-quart'],
6367
[css.linear, 'linear']
6468
];
6569

@@ -71,7 +75,7 @@ describe('Transition Specs', () => {
7175

7276
propStyleCombination.forEach(([prop, val]) => {
7377
val.forEach(([key, value]) => {
74-
it(`should apply classes for ${prop}={${value}}`, function () {
78+
it(`should apply classes for ${prop}="${value}"`, function () {
7579
const propValue = {
7680
[prop]: value
7781
};

‎packages/webos/CHANGELOG.md

+8
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@
22

33
The following is a curated list of changes in the Enact webos module, newest changes on the top.
44

5+
## [unreleased]
6+
7+
### Added
8+
9+
### Changed
10+
11+
### Fixed
12+
513
## [1.12.2] - 2017-11-15
614

715
### Fixed

0 commit comments

Comments
 (0)