Add an opacity change from 1 to 0 inside your animation ?
Or add a SequentialAnimation with a PropertyChanges to set visible at false at
end of animation. Don't forget to disable "reversible" property, and write the
reverse animation too.
----- Mail original -----
De: marmistrz...@gmail.com
À: "Sailfish OS Developers" <devel@lists.sailfishos.org>
Envoyé: Vendredi 18 Juillet 2014 13:09:37
Objet: Re: [SailfishDevel] How to properly hide and show UI elements?
Visible = false is instant so it can't be animated. It won't look really nice
without animation
On 18.07.2014 12:42 Dmitriy Purgin wrote:
so you try to hide a component by setting its height = 0? have you
tried visible = false?
2014-07-18 16:30 GMT+06:00 Marcin M. < marmistrz...@gmail.com >:
> I'm want to display some elements only when needed. So I did it like this
> (the components are inside a Column):
>
> TextSwitch
> {
> id: switchTextColor
> text: qsTr("Override text color")
> checked: settings.overrideTextColor
> states: State
> {
> name: "checked"; when: switchTextColor.checked == true;
> PropertyChanges { target: textColorButton; height:
> Theme.itemSizeSmall}
> }
> transitions: Transition
> {
> from: "*"; to: "checked"; reversible: true
> NumberAnimation { property: "height"; duration: 200;
> easing.type: Easing.InOutQuad }
> }
> }
>
> ColorButton
> {
> id: textColorButton
> height: 0
> }
>
> And the ColorButton component is:
> Row
> {
> id: root
> property string color: "transparent"
> width: parent.width
> Rectangle
> {
> id: colorIndicator
> color: root.color
> width: Theme.itemSizeSmall
> height: Theme.itemSizeSmall
> border.color: "black"
> border.width: 5
> }
>
> Button
> {
> id: button
> text: "Choose a color"
> onClicked:
> {
> var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog")
> dialog.accepted.connect(function() { root.color = dialog.color
> })
> }
> }
> }
>
> Instead of hiding, the textColorButton is at the top of the Page. If I check
> switchTextColor, then it goes where it should be. If then I uncheck the
> Switch, the component below goes up, but the textColorButton doesn't
> disappear (screenshot)?
>
> What am I doing wrong?
>
> --
> Marcin
>
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to marmistrz...@gmail.com
_______________________________________________
SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to marmistrz...@gmail.com
On 18.07.2014 12:42 Dmitriy Purgin wrote:
so you try to hide a component by setting its height = 0? have you
tried visible = false?
2014-07-18 16:30 GMT+06:00 Marcin M. < marmistrz...@gmail.com >:
> I'm want to display some elements only when needed. So I did it like this
> (the components are inside a Column):
>
> TextSwitch
> {
> id: switchTextColor
> text: qsTr("Override text color")
> checked: settings.overrideTextColor
> states: State
> {
> name: "checked"; when: switchTextColor.checked == true;
> PropertyChanges { target: textColorButton; height:
> Theme.itemSizeSmall}
> }
> transitions: Transition
> {
> from: "*"; to: "checked"; reversible: true
> NumberAnimation { property: "height"; duration: 200;
> easing.type: Easing.InOutQuad }
> }
> }
>
> ColorButton
> {
> id: textColorButton
> height: 0
> }
>
> And the ColorButton component is:
> Row
> {
> id: root
> property string color: "transparent"
> width: parent.width
> Rectangle
> {
> id: colorIndicator
> color: root.color
> width: Theme.itemSizeSmall
> height: Theme.itemSizeSmall
> border.color: "black"
> border.width: 5
> }
>
> Button
> {
> id: button
> text: "Choose a color"
> onClicked:
> {
> var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog")
> dialog.accepted.connect(function() { root.color = dialog.color
> })
> }
> }
> }
>
> Instead of hiding, the textColorButton is at the top of the Page. If I check
> switchTextColor, then it goes where it should be. If then I uncheck the
> Switch, the component below goes up, but the textColorButton doesn't
> disappear (screenshot)?
>
> What am I doing wrong?
>
> --
> Marcin
>
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to marmistrz...@gmail.com
_______________________________________________
SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to marmistrz...@gmail.com
_______________________________________________
SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to devel-unsubscr...@lists.sailfishos.org
_______________________________________________
SailfishOS.org Devel mailing list
To unsubscribe, please send a mail to devel-unsubscr...@lists.sailfishos.org
