update

example/qml/page/T_Home.qml

@@ -8,6 +8,7 @@ import FluentUI
 FluScrollablePage{
 
     pageMode: FluNavigationView.SingleTask
+    animDisabled: true
 
     ListModel{
         id:model_header

example/qml/page/T_Image.qml

@@ -11,7 +11,7 @@ FluScrollablePage{
 
     FluArea{
         Layout.fillWidth: true
-        height: 300
+        height: 260
         paddings: 10
         Layout.topMargin: 20
         Column{

example/qml/window/MainWindow.qml

@@ -16,7 +16,7 @@ CustomWindow {
     height: 640
     closeDestory:false
     minimumWidth: 520
-    minimumHeight: 460
+    minimumHeight: 200
     appBarVisible: false
     launchMode: FluWindow.SingleTask
 
@@ -95,7 +95,7 @@ CustomWindow {
             when: flipable.flipped
         }
         transitions: Transition {
-            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutQuad}
+            NumberAnimation { target: flipable; property: "flipAngle"; duration: 1000 ; easing.type: Easing.OutCubic}
         }
         back: Item{
             anchors.fill: flipable

src/imports/FluentUI/Controls/FluExpander.qml

@@ -9,10 +9,8 @@ Item {
     property int contentHeight : 300
     default property alias content: container.data
     id:control
-    height: layout_header.height + container.height
+    implicitHeight: Math.max((layout_header.height + container.height),layout_header.height)
-    width: 400
+    implicitWidth: 400
-    implicitWidth: width
-    implicitHeight: height
     Rectangle{
         id:layout_header
         width: parent.width
@@ -58,29 +56,65 @@ Item {
                 Behavior on rotation {
                     NumberAnimation{
                         duration: 167
+                        easing.type: Easing.OutCubic
                     }
                 }
             }
         }
     }
-    Rectangle{
+    Item{
-        id:container
-        width: parent.width
-        clip: true
         anchors{
             top: layout_header.bottom
             topMargin: -1
             left: layout_header.left
         }
+        width: parent.width
+        clip: true
+        height: contentHeight+container.y
+        Rectangle{
+            id:container
+            width: parent.width
+            height: parent.height
             radius: 4
             color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
             border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-        height: expand ? contentHeight : 0
+            y: -contentHeight
-        Behavior on height {
+            states: [
-            NumberAnimation{
+                State{
-                duration: 167
+                    name:"expand"
-                easing.type: Easing.InCubic
+                    when: control.expand
+                    PropertyChanges {
+                        target: container
+                        y:0
                     }
+                },
+                State{
+                    name:"collapsed"
+                    when: !control.expand
+                    PropertyChanges {
+                        target: container
+                        y:-contentHeight
+                    }
+                }
+            ]
+            transitions: [
+                Transition {
+                    to:"expand"
+                    NumberAnimation {
+                        properties: "y"
+                        duration: 167
+                        easing.type: Easing.OutCubic
+                    }
+                },
+                Transition {
+                    to:"collapsed"
+                    NumberAnimation {
+                        properties: "y"
+                        duration: 167
+                        easing.type: Easing.OutCubic
+                    }
+                }
+            ]
         }
     }
 }

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -118,11 +118,6 @@ Item {
                 }
                 return 1
             }
-            Behavior on height {
-                NumberAnimation{
-                    duration: 83
-                }
-            }
         }
     }
     Component{
@@ -242,7 +237,8 @@ Item {
                         }
                         Behavior on rotation {
                             NumberAnimation{
-                                duration: 83
+                                duration: 167
+                                easing.type: Easing.OutCubic
                             }
                         }
                     }
@@ -564,7 +560,7 @@ Item {
                 Behavior on Layout.preferredWidth {
                     NumberAnimation{
                         duration: 167
-                        easing.type: Easing.InCubic
+                        easing.type: Easing.OutCubic
                     }
                 }
             }
@@ -630,7 +626,7 @@ Item {
         Behavior on anchors.leftMargin {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
         StackView{
@@ -685,13 +681,13 @@ Item {
         Behavior on width {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
         Behavior on x {
             NumberAnimation{
                 duration: 167
-                easing.type: Easing.InCubic
+                easing.type: Easing.OutCubic
             }
         }
         visible: {
@@ -756,6 +752,7 @@ Item {
             clip: true
             ScrollBar.vertical: FluScrollBar {}
             model:d.handleItems()
+            boundsBehavior: ListView.StopAtBounds
             highlightMoveDuration: 167
             highlight: Item{
                 clip: true
@@ -809,6 +806,7 @@ Item {
             height: childrenRect.height
             anchors.bottom: parent.bottom
             interactive: false
+            boundsBehavior: ListView.StopAtBounds
             currentIndex: -1
             model: {
                 if(footerItems){

src/imports/FluentUI/Controls/FluPage.qml

@@ -6,13 +6,25 @@ import FluentUI
 
 Item {
     property int pageMode: FluNavigationView.SingleTop
+    property bool animDisabled: false
     property string url : ""
     id: control
     opacity: visible
     visible: false
     Behavior on opacity{
+        enabled: !animDisabled
         NumberAnimation{
-            duration: 83
+            duration: 167
+        }
+    }
+    transform: Translate {
+        y: control.visible ? 0 : 80
+        Behavior on y{
+            enabled: !animDisabled
+            NumberAnimation{
+                duration: 167
+                easing.type: Easing.OutCubic
+            }
         }
     }
     Component.onCompleted: {

src/imports/FluentUI/Controls/FluPivot.qml

@@ -40,7 +40,7 @@ Item {
                 Behavior on width {
                     NumberAnimation{
                         duration: 167
-                        easing.type: Easing.InCubic
+                        easing.type: Easing.OutCubic
                     }
                 }
             }

src/imports/FluentUI/Controls/FluPopup.qml

@@ -21,6 +21,7 @@ Popup {
             from:1.2
             to:1
             duration: 83
+            easing.type: Easing.OutCubic
         }
         NumberAnimation {
             property: "opacity"
@@ -35,6 +36,7 @@ Popup {
             from:1
             to:1.2
             duration: 83
+            easing.type: Easing.OutCubic
         }
         NumberAnimation {
             property: "opacity"

src/imports/FluentUI/Controls/FluRadioButton.qml

@@ -64,8 +64,7 @@ Button {
             Behavior on border.width {
                 NumberAnimation{
                     duration: 167
-                    easing.type: Easing.BezierSpline
+                    easing.type: Easing.OutCubic
-                    easing.bezierCurve: [ 0, 0, 0, 1 ]
                 }
             }
             border.color: {

src/imports/FluentUI/Controls/FluScrollBar.qml

@@ -51,7 +51,7 @@ T.ScrollBar {
             }
             ,State{
                 name:"show"
-                when: !contentItem.expand
+                when: !contentItem.collapsed
                 PropertyChanges {
                     target: rect_bar
                     width:  vertical ? 2 : parent.width
@@ -68,7 +68,7 @@ T.ScrollBar {
                         target: rect_bar
                         properties: vertical ? "width"  : "height"
                         duration: 167
-                        easing.type: Easing.InCubic
+                        easing.type: Easing.OutCubic
                         to:2
                     }
                 }
@@ -79,7 +79,7 @@ T.ScrollBar {
                     target: rect_bar
                     properties: vertical ? "width"  : "height"
                     duration: 167
-                    easing.type: Easing.InCubic
+                    easing.type: Easing.OutCubic
                     to:6
                 }
             }

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -44,6 +44,7 @@ FluPage {
             anchors.right: flickview.right
             anchors.rightMargin: 2
         }
+        boundsBehavior: Flickable.StopAtBounds
         anchors{
             top: text_title.bottom
             bottom: parent.bottom

src/imports/FluentUI/Controls/FluSlider.qml

@@ -38,6 +38,7 @@ T.Slider {
             Behavior on scale {
                 NumberAnimation{
                     duration: 167
+                    easing.type: Easing.OutCubic
                 }
             }
         }

src/imports/FluentUI/Controls/FluTextBoxBackground.qml

@@ -49,8 +49,7 @@ Rectangle{
         Behavior on height{
             NumberAnimation{
                 duration: 83
-                easing.type: Easing.BezierSpline
+                easing.type: Easing.OutCubic
-                easing.bezierCurve: [ 1, 0, 0, 0 ]
             }
         }
     }

src/imports/FluentUI/Controls/FluToggleSwitch.qml

@@ -92,25 +92,25 @@ Button {
                 Behavior on anchors.leftMargin  {
                     NumberAnimation {
                         duration: 167
-                        easing.type: Easing.BezierSpline
+                        easing.type: Easing.OutCubic
-                        easing.bezierCurve: [ 1, 0, 0, 0 ]
                     }
                 }
                 Behavior on anchors.rightMargin  {
                     NumberAnimation {
                         duration: 167
-                        easing.type: Easing.BezierSpline
+                        easing.type: Easing.OutCubic
-                        easing.bezierCurve: [ 0, 0, 0, 1 ]
                     }
                 }
                 Behavior on width {
                     NumberAnimation {
                         duration: 167
+                        easing.type: Easing.OutCubic
                     }
                 }
                 Behavior on scale {
                     NumberAnimation {
                         duration: 167
+                        easing.type: Easing.OutCubic
                     }
                 }
             }