<div dir="ltr">It might be an option... I'll take a look. But why is the component left there? If it has height = 0, it should not be displayed.</div><div class="gmail_extra"><br clear="all"><div><div>--</div>Marcin<br>

</div>
<br><br><div class="gmail_quote">2014-07-18 13:16 GMT+02:00  <span dir="ltr"><<a href="mailto:sfietkonstantin@free.fr" target="_blank">sfietkonstantin@free.fr</a>></span>:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">

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