How would I "slide-up" a template?

ionic-v1
1

Hello everyone,

I am building a music application with IONIC, and been trying to figure out this problem for awhile, and not getting anywhere, so I am hoping someone on this forum can give me some direction or help.

So, when the application starts, the first thing you see is the radio screen.

When I click on the menu-icon, and then click on ‘about’ in the menu, i’ll see a footer on the about.html page which displays a radio toolbar. What I would like to achieve is when I click on that toolbar, i would like the “home.html” to slide-up…and pretty much see the same thing when the application started. I hope this makes sense.

At the moment, I have a <a href="#/radio/home" menu-close> </a> around the footer div toolbar, which does the job…but it just appears, not the effect i’m looking for, I rather have it slide-up nicely for the user experience.

image
Screen Shot 125.jpg636×1136 74.6 KB

1 Like
2

Bump - Anyone have any tips for me?

3

Hi @y_lee, you should take a look at the upcoming Ionic features.

nav-transition
nav-direction

I dunno at what point they’ll be customizable, but in the last bit of ionic.css you can have a sneak peek:

[nav-view-transition="ios"] [nav-view="entering"], [nav-view-transition="ios"] [nav-view="leaving"] {
  -webkit-transition-duration: 450ms;
  transition-duration: 450ms;
  -webkit-transition-timing-function: cubic-bezier(0.3, 0.9, 0.4, 1);
  transition-timing-function: cubic-bezier(0.3, 0.9, 0.4, 1);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform; }
[nav-view-transition="ios"][nav-view-direction="forward"], [nav-view-transition="ios"][nav-view-direction="back"] {
  background-color: #000; }
[nav-view-transition="ios"] [nav-view="active"], [nav-view-transition="ios"][nav-view-direction="forward"] [nav-view="entering"], [nav-view-transition="ios"][nav-view-direction="back"] [nav-view="leaving"] {
  z-index: 3; }
[nav-view-transition="ios"][nav-view-direction="back"] [nav-view="entering"], [nav-view-transition="ios"][nav-view-direction="forward"] [nav-view="leaving"] {
  z-index: 2; }

[nav-bar-transition="ios"] .title, [nav-bar-transition="ios"] .buttons, [nav-bar-transition="ios"] .back-text {
  -webkit-transition-duration: 450ms;
  transition-duration: 450ms;
  -webkit-transition-timing-function: cubic-bezier(0.3, 0.9, 0.4, 1);
  transition-timing-function: cubic-bezier(0.3, 0.9, 0.4, 1);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform; }
[nav-bar-transition="ios"] [nav-bar="active"], [nav-bar-transition="ios"] [nav-bar="entering"] {
  z-index: 10; }
  [nav-bar-transition="ios"] [nav-bar="active"] .bar, [nav-bar-transition="ios"] [nav-bar="entering"] .bar {
    background: transparent; }
[nav-bar-transition="ios"] [nav-bar="cached"] {
  display: block; }
  [nav-bar-transition="ios"] [nav-bar="cached"] .header-item {
    display: none; }

[nav-view-transition="android"] [nav-view="entering"], [nav-view-transition="android"] [nav-view="leaving"] {
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
  -webkit-transition-property: -webkit-transform;
  transition-property: transform; }
[nav-view-transition="android"] [nav-view="active"], [nav-view-transition="android"][nav-view-direction="forward"] [nav-view="entering"], [nav-view-transition="android"][nav-view-direction="back"] [nav-view="leaving"] {
  z-index: 3; }
[nav-view-transition="android"][nav-view-direction="back"] [nav-view="entering"], [nav-view-transition="android"][nav-view-direction="forward"] [nav-view="leaving"] {
  z-index: 2; }

[nav-bar-transition="android"] .title, [nav-bar-transition="android"] .buttons {
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
  transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1);
  -webkit-transition-property: opacity;
  transition-property: opacity; }
[nav-bar-transition="android"] [nav-bar="active"], [nav-bar-transition="android"] [nav-bar="entering"] {
  z-index: 10; }
  [nav-bar-transition="android"] [nav-bar="active"] .bar, [nav-bar-transition="android"] [nav-bar="entering"] .bar {
    background: transparent; }
[nav-bar-transition="android"] [nav-bar="cached"] {
  display: block; }
  [nav-bar-transition="android"] [nav-bar="cached"] .header-item {
    display: none; }

At the moment, I suggest you using a simple modal for the about.html template with a custom css animation:

1 Like