Can I do a "mobile like" transition on phone (using web app)

At this point, I have no need for “app store” delivery. My app will simply run from the browser.
But if a user is on a phone, they see the picture below.
The “chevron-right” makes it look familiar as other phone apps, and hopefully this tells them if they tap on a row, there’s a NEXT screen.

My Q is: Is there a “slide” effect for the next screen - and then a reverse slide when they tap my Back icon?
Or should I just use a full page modal and be done with it?

I’m not sure if this is really needed or can be done, so I’m asking before I get started on a details screen. On a wider screen size, I’m using the ‘detail view’ to display details on the right side of the screen.
Just trying to make it more ‘mobile-like’ for the UI, but its not a biggie.

Thx

image

Have you tried using animations? It can be found in the Dynamic Attributes.

thx

  1. no, didnt know about those. i search for various combinations of “slide” “mobile” “transition” etc and got many non-applicable results. will research “animations”

  2. to use this, what mechanism am I using to bring up the next screen? Am I using a “modal” or just going to another content page?

You would be going either to another page or to a data detail area.

Select the element where you have your details (Where ever it goes when you click on the Chevrons). In my case I was going to a new page so I selected the container on the new page.

right now i’m doing a data-detail
http://137.184.106.209/vehicle_list3_dayof

but if you narrow your screen the chevron appears.
it STILL goes to data-detail, but its way at the bottom.
AND unless you’ve filtered to few results, its not usable cause its WAYYYY down there.

The docs had a section on data-detail to modal, which i don’t need unless you’re on a phone. so maybe I can conditionally choose which one to do. That’ll be my next step.
Thx again!

Hmmm, I see your issue. Personally, I would use a modal for your details regardless what size screen is being used.

For a single page to have a slide effect a offcanvas is also a really nice choice in my option, you can also then have the offcanvas always show on bigger screens

1 Like

I forgot about offCanvas … that is a good option as well.

1 Like

are you saying this after looking at my app in mobile view?,
or just in general?

And did you mean “for a SINGLE PAGE APP” ?
If not, what do you mean by “a single page to have…”?

In general it is nice for a way of showing data from say in a table and showing extra details about the record chosen. but it remains on the same page for example the table and record details stay on mysite.com/table.ejs.

Essentially you just have the Offcanvas with a data detail inside which covers the table
resembling sliding and then when you close the offcanvas you see the table again If your wanting each record to have a completely separate page Brads idea is probably more what you are looking for

Thank you both for the suggestions. I’m excited and learning!