Navigating to home page, makes my circles disappear

General
#1

Well I have an each command that displays the circles and when I navigate away from the home page and back to it, the circles dissappear. I am able to drag the blue circle in the corner for it to reappear but that shouldn’t be happening. Here’s a video of it.

https://youtu.be/3hWc0KxcPIs

and the code:


<Panel ux:Class="HomePage">
    <Router ux:Dependency="router" />
    <JavaScript File="Test.js" />

    <Panel>
        <LinearNavigation ux:Name="navigation">
            <NavigationMotion GotoEasing="QuadraticOut" GotoDuration=".5" />
        </LinearNavigation>
        <SwipeNavigate SwipeDirection="Left" />

        <Each Count="9">
            <Media />
        </Each>

    </Panel>


    <Panel ux:Class="Media"  ux:Name="self" Opacity="0.4">


            <ActivatingAnimation>
                <Change self.Opacity="1" Duration="0.5" />
            </ActivatingAnimation>

            <EnteringAnimation>
                   <Move X="-.88" RelativeTo="ParentSize" Duration="0.5" />
            </EnteringAnimation>
            <ExitingAnimation>
                <Move X=".88" RelativeTo="ParentSize" Duration="0.5"/>
            </ExitingAnimation>

            <SwipeGesture ux:Name="swipeUp" Direction="Up" Type="Active" />

            <SwipingAnimation Source="swipeUp">
                <Move Target="topLayer" Y="-.3" RelativeTo="Size" Duration="2.8" />
                <Scale Target="MainMedia" Factor="0.8" Easing="QuadraticInOut" Duration="2.9"/>

                <EnteringAnimation>
                </EnteringAnimation>

            </SwipingAnimation>

            <WhileInactive Threshold="0.2">
                <SetSwipeActive Target="swipeUp" Value="false" />
            </WhileInactive>

        <Panel ux:Name="topLayer" >
             <Circle ux:Name="ProfilePic" Color="Blue" Layer="Overlay" Height="16.5%" Width="16.5%" Opacity="1" Alignment="Left" X="8%" Y="12.5%">
             <Stroke Color="Black" Width="1.4" />
                 <DropShadow Distance="1.5" Spread=".3" />
            </Circle>
            <Circle Height="70%" Width="70%" Layer="Overlay" X="15.5%" ux:Name="MainMedia" Y="15%" Color="Purple" />
            <Rectangle Width="100%" Color="Red" Layer="Background" Opacity="0" Height="50%" />


        </Panel>

        <Panel ux:Name="botLayer">
        </Panel>



    </Panel>
    <Panel Color="Yellow" Height="12%" Alignment="Top">
    </Panel>

    <Panel Color="Yellow" Height="12%" Alignment="Bottom">
    </Panel>


</Panel>

& the navigation


<DockPanel>
            <Panel Height="12%" Dock="Bottom">
                <StackPanel Orientation="Horizontal">
                    <Button Text="Home" Clicked="{navHome}"/>
                    <Button Text="Alerts" Clicked="{navAlerts}"/>
                    <Button Text="Profile" Clicked="{navProfile}"/>
                </StackPanel>
            </Panel>
    </DockPanel>


var Observable = require('FuseJS/Observable');




function navHome() {
    router.goto("Home");
}


function navAlerts() {
    router.goto("Alerts");
}
function navProfile() {
    router.goto("Profile");
}

module.exports = {

    navHome:navHome,
    navAlerts:navAlerts,
    navProfile:navProfile

};
#2

Hi,

Try to remove the empty EnteringAnimation inside your SwipingAnimation (what is it doing there?) and see if that helps.

#3

That did not work unfortunately, when I move to a new page and go back it continues to do the same problem, I have that there because it allows my old circle to move, this is based off the example https://www.fusetools.com/examples/swipe-gesture-reveal

#4

I can’t find anything wrong with your code. There might be something outside the code you have pasted. It would also help to see what you mean by "I am able to drag the blue circle in the corner for it to reappear "

#5

What I think is occurring is when I leave the page, the circle is moving because of the editing animation and I think it’s the navigator triggering it. Unfortunately I can’t produce another video as I am on mobile at the moment. But what I mean is if you watch the video you can see a blue circle in the top right corner where the next circle is from the each and if I swipe from there I can see the circles again. So I think the issue has to do with the move being triggered by navigator. But there is no other code. I had done this in a separate file and then transferred it to my main project

#6

Anders Lassen wrote:

I can’t find anything wrong with your code. There might be something outside the code you have pasted. It would also help to see what you mean by "I am able to drag the blue circle in the corner for it to reappear "

I have updated the video with what you wanted to see for the blue circle

https://youtu.be/3hWc0KxcPIs

#7

So after doing some testing, it seems this is being causeed by the exiting animation, any ideas on why this may be occuring? I think it has to do with the router, and the app thinking that it is techinically “exiting” because the pages are changing.

#8

Hi,

No idea, but it is an interesting bug. If you upload your test case somewhere, we can take a quick look.

E.g. drop here to upload to Fuse support: https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK

#9

I’ve submitted the test case any news on this?

#10

Any news on this, i’ve submitted a test-case a few weeks ago, just checking :slight_smile:

#11

Haven’t had a chance to take a look, but I’ll make a ticket on it internally.

#12

Hi!

We have located the soruce of the error. The <Each /> is not working after the first time it has been evaluated in your case. You can remove it as a workaround.

I dont have an ETA for you yet. But thanks for bumping the thread :slight_smile: