@@ -127,15 +127,15 @@ Item {
127127 // page title
128128 Label {
129129 id: titleLabel
130+ property real animatedMargin: 0
130131 anchors {
131132 left: parent.left
132133 right: parent.right
133134 bottom: parent.bottom
134135 bottomMargin: bottomMargin
135− leftMargin: leftMargin
136+ leftMargin: leftMargin + titleLabel.animatedMargin
136137 rightMargin: rightMargin
137138 }
138− wrapMode: Text.Wrap
139139 text: title
140140 color: customTitle ? textColor : backgroundColor
141141 fontSize: customTitle ? "large" : "x-large"
@@ -195,11 +195,13 @@ Item {
195195 // content
196196 Item {
197197 id: contentHolder
198+ property real animatedMargin: 0
198199 anchors {
199200 top: titleRect.bottom
200201 left: parent.left
201202 right: parent.right
202203 bottom: buttonBarVisible ? buttonRect.top : parent.top
204+ leftMargin: contentHolder.animatedMargin
203205 }
204206 }
205207
@@ -247,4 +249,73 @@ Item {
247249 z: 1
248250 }
249251 }
252+
253+ // transitions
254+
255+ function aboutToShow(duration, direction) {
256+ startContentAnimation(duration, direction)
257+ startShowing(duration)
258+ }
259+
260+ function startContentAnimation(duration, direction) {
261+ contentAnimation.animationDurationBase = duration
262+ contentAnimation.direction = direction
263+ contentAnimation.restart()
264+ }
265+
266+ function startShowing(showDuration) {
267+ actionsShowAnimation.showDuration = showDuration
268+ actionsShowAnimation.restart()
269+ }
270+
271+ SequentialAnimation {
272+ id: actionsShowAnimation
273+ property int showDuration: 0
274+ PropertyAction {
275+ target: buttonRect
276+ property: 'opacity'
277+ value: 0
278+ }
279+ PauseAnimation { duration: Math.max(0, actionsShowAnimation.showDuration - UbuntuAnimation.SnapDuration) }
280+ NumberAnimation {
281+ target: buttonRect
282+ property: 'opacity'
283+ to: 1
284+ duration: UbuntuAnimation.SnapDuration
285+ }
286+ }
287+
288+ SequentialAnimation {
289+ id: contentAnimation
290+ property int animationDurationBase: UbuntuAnimation.BriskDuration
291+ readonly property int additionalDuration: 200
292+ property int direction: Qt.LeftToRight
293+ ScriptAction {
294+ script: {
295+ if (contentAnimation.direction === Qt.LeftToRight) {
296+ titleLabel.animatedMargin = -titleRect.width;
297+ content.animatedMargin = -content.width;
298+ } else {
299+ titleLabel.animatedMargin = titleRect.width;
300+ content.animatedMargin = content.width;
301+ }
302+ }
303+ }
304+ ParallelAnimation {
305+ NumberAnimation {
306+ targets: [titleLabel, content]
307+ property: 'animatedMargin'
308+ to: 0
309+ duration: contentAnimation.animationDurationBase + contentAnimation.additionalDuration
310+ easing.type: Easing.OutCubic
311+ }
312+ NumberAnimation {
313+ targets: [titleLabel,content]
314+ property: 'opacity'
315+ from: 0
316+ to: 1
317+ duration: contentAnimation.animationDurationBase
318+ }
319+ }
320+ }
250321}