Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Manual page's animation type

See original GitHub issue

I’m using F7 in a Cordova app with md theme, but I would like to use the iOS transitions on iOS device instead the md ones.

In v1 I made an override of page-from-right-to-center, page-from-center-to-right, page-from-center-to-left and page-from-left-to-center` CSS classes, but I have some problems to make the same think in v2 (and v3 I suppose).

There is a way to manually set the transition type?

Thank you

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
ronaldsbraivocommented, Jul 16, 2018

I had the same problem. To use iOS like transitions I overrode CSS like this:

.router-transition-css-backward .page-current {
    animation: md-page-current-to-next 400ms forwards;
}

.router-transition-css-forward .page-next {
    animation: md-page-current-to-previous 400ms forwards;
}

@keyframes md-page-current-to-next {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        transform: translate3d(100%,0,0);
    }
}

@keyframes md-page-current-to-previous {
    from {
        transform: translate3d(100%,0,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}

Maybe this can be of any help to you.

0reactions
lcaprinicommented, Jul 20, 2018

Done! I copied all other “transitioning” animations and now it works correctly. The “flash” was related to the opacity:0 on .md .page-next; I added opacity: 1 in .device-ios.md .page-next and now it’s all ok. The following is the included CSS file; I hope this could help someone.

Thanks.

.device-ios.md .page-shadow-effect {
    position: absolute;
    top: 0;
    width: 16px;
    bottom: 0;
    z-index: -1;
    content: '';
    opacity: 0;
    right: 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.01)), to(rgba(0, 0, 0, 0.2)));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
}

.device-ios.md .page-opacity-effect {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    bottom: 0;
    content: '';
    opacity: 0;
    z-index: 10000;
}

.device-ios.md .router-dynamic-navbar-inside .page-shadow-effect,
.device-ios.md .router-dynamic-navbar-inside .page-opacity-effect {
    top: 44px;
}

.device-ios.md .page {
    background: #efeff4;
}

.device-ios.md .page-previous {
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
}

.device-ios.md .page-next {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 1;
}

.device-ios.md .page-previous .page-opacity-effect {
    opacity: 1;
}

.device-ios.md .page-previous:after {
    opacity: 1;
}

.device-ios.md .page-current .page-shadow-effect {
    opacity: 1;
}

.device-ios.md .page-transitioning,
.device-ios.md .page-transitioning .page-shadow-effect,
.device-ios.md .page-transitioning .page-opacity-effect {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}

.device-ios.md .router-transition-forward .page-next,
.device-ios.md .router-transition-backward .page-next,
.device-ios.md .router-transition-forward .page-current,
.device-ios.md .router-transition-backward .page-current,
.device-ios.md .router-transition-forward .page-previous:not(.stacked),
.device-ios.md .router-transition-backward .page-previous:not(.stacked) {
    pointer-events: none;
}

.device-ios.md .router-transition-css-forward .page-next {
    -webkit-animation: ios-page-next-to-current 400ms forwards;
    animation: ios-page-next-to-current 400ms forwards;
}

.device-ios.md .router-transition-css-forward .page-next:before {
    position: absolute;
    top: 0;
    width: 16px;
    bottom: 0;
    z-index: -1;
    content: '';
    opacity: 0;
    right: 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.01)), to(rgba(0, 0, 0, 0.2)));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
    -webkit-animation: ios-page-next-to-current-shadow 400ms forwards;
    animation: ios-page-next-to-current-shadow 400ms forwards;
}

.device-ios.md .router-transition-css-forward .page-current {
    -webkit-animation: ios-page-current-to-previous 400ms forwards;
    animation: ios-page-current-to-previous 400ms forwards;
}

.device-ios.md .router-transition-css-forward .page-current:after {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    bottom: 0;
    content: '';
    opacity: 0;
    z-index: 10000;
    -webkit-animation: ios-page-current-to-previous-opacity 400ms forwards;
    animation: ios-page-current-to-previous-opacity 400ms forwards;
}

.device-ios.md .router-transition-css-forward.router-dynamic-navbar-inside .page-next:before,
.device-ios.md .router-transition-css-forward.router-dynamic-navbar-inside .page-current:after {
    top: 44px;
}

.device-ios.md .router-transition-css-backward .page-previous,
.device-ios.md .router-transition-css-backward .page-current {
    pointer-events: none;
}

.device-ios.md .router-transition-css-backward .page-previous {
    -webkit-animation: ios-page-previous-to-current 400ms forwards;
    animation: ios-page-previous-to-current 400ms forwards;
}

.device-ios.md .router-transition-css-backward .page-previous:after {
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    bottom: 0;
    content: '';
    opacity: 0;
    z-index: 10000;
    -webkit-animation: ios-page-previous-to-current-opacity 400ms forwards;
    animation: ios-page-previous-to-current-opacity 400ms forwards;
}

.device-ios.md .router-transition-css-backward .page-current {
    -webkit-animation: ios-page-current-to-next 400ms forwards;
    animation: ios-page-current-to-next 400ms forwards;
}

.device-ios.md .router-transition-css-backward .page-current:before {
    position: absolute;
    top: 0;
    width: 16px;
    bottom: 0;
    z-index: -1;
    content: '';
    opacity: 0;
    right: 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 0.01)), to(rgba(0, 0, 0, 0.2)));
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
    -webkit-animation: ios-page-current-to-next-shadow 400ms forwards;
    animation: ios-page-current-to-next-shadow 400ms forwards;
}

.device-ios.md .router-transition-css-backward.router-dynamic-navbar-inside .page-current:before,
.device-ios.md .router-transition-css-backward.router-dynamic-navbar-inside .page-previous:after {
    top: 44px;
}

.device-ios.md .theme-dark .page,
.page.device-ios.md .theme-dark {
    background: #171717;
}

.device-ios.md .navbar-transitioning {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}

.device-ios.md .navbar-hidden {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.device-ios.md .router-transition-css-forward .navbar-current .left,
.device-ios.md .router-transition-css-backward .navbar-current .left,
.device-ios.md .router-transition-css-forward .navbar-current>.title,
.device-ios.md .router-transition-css-backward .navbar-current>.title,
.device-ios.md .router-transition-css-forward .navbar-current .right,
.device-ios.md .router-transition-css-backward .navbar-current .right,
.device-ios.md .router-transition-css-forward .navbar-current .subnavbar,
.device-ios.md .router-transition-css-backward .navbar-current .subnavbar {
    -webkit-animation: ios-navbar-element-fade-out 400ms forwards;
    animation: ios-navbar-element-fade-out 400ms forwards;
}

.device-ios.md .router-transition-css-forward .navbar-current .sliding,
.device-ios.md .router-transition-css-backward .navbar-current .sliding,
.device-ios.md .router-transition-css-forward .navbar-current .left.sliding .icon,
.device-ios.md .router-transition-css-backward .navbar-current .left.sliding .icon,
.device-ios.md .router-transition-css-forward .navbar-current.sliding .left,
.device-ios.md .router-transition-css-backward .navbar-current.sliding .left,
.device-ios.md .router-transition-css-forward .navbar-current.sliding .left .icon,
.device-ios.md .router-transition-css-backward .navbar-current.sliding .left .icon,
.device-ios.md .router-transition-css-forward .navbar-current.sliding>.title,
.device-ios.md .router-transition-css-backward .navbar-current.sliding>.title,
.device-ios.md .router-transition-css-forward .navbar-current.sliding .right,
.device-ios.md .router-transition-css-backward .navbar-current.sliding .right {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    opacity: 0 !important;
    -webkit-animation: none;
    animation: none;
}

.device-ios.md .router-transition-css-forward .navbar-current.sliding .subnavbar,
.device-ios.md .router-transition-css-backward .navbar-current.sliding .subnavbar,
.device-ios.md .router-transition-css-forward .navbar-current .sliding.subnavbar,
.device-ios.md .router-transition-css-backward .navbar-current .sliding.subnavbar {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-animation: none;
    animation: none;
    opacity: 1;
}

.device-ios.md .router-transition-css-forward .navbar-next .left,
.device-ios.md .router-transition-css-backward .navbar-previous .left,
.device-ios.md .router-transition-css-forward .navbar-next>.title,
.device-ios.md .router-transition-css-backward .navbar-previous>.title,
.device-ios.md .router-transition-css-forward .navbar-next .right,
.device-ios.md .router-transition-css-backward .navbar-previous .right,
.device-ios.md .router-transition-css-forward .navbar-next .subnavbar,
.device-ios.md .router-transition-css-backward .navbar-previous .subnavbar {
    -webkit-animation: ios-navbar-element-fade-in 400ms forwards;
    animation: ios-navbar-element-fade-in 400ms forwards;
}

.device-ios.md .router-transition-css-forward .navbar-next .sliding,
.device-ios.md .router-transition-css-backward .navbar-previous .sliding,
.device-ios.md .router-transition-css-forward .navbar-next .left.sliding .icon,
.device-ios.md .router-transition-css-backward .navbar-previous .left.sliding .icon,
.device-ios.md .router-transition-css-forward .navbar-next.sliding .left,
.device-ios.md .router-transition-css-backward .navbar-previous.sliding .left,
.device-ios.md .router-transition-css-forward .navbar-next.sliding .left .icon,
.device-ios.md .router-transition-css-backward .navbar-previous.sliding .left .icon,
.device-ios.md .router-transition-css-forward .navbar-next.sliding>.title,
.device-ios.md .router-transition-css-backward .navbar-previous.sliding>.title,
.device-ios.md .router-transition-css-forward .navbar-next.sliding .right,
.device-ios.md .router-transition-css-backward .navbar-previous.sliding .right,
.device-ios.md .router-transition-css-forward .navbar-next.sliding .subnavbar,
.device-ios.md .router-transition-css-backward .navbar-previous.sliding .subnavbar {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-animation: none;
    animation: none;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

.device-ios.md .toolbar-transitioning {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}

.device-ios.md .toolbar-hidden {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.device-ios.md .panel-backdrop {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    background: rgba(0, 0, 0, 0);
}

.device-ios.md .panel {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
}

.device-ios.md.with-panel-left-reveal .views,
.device-ios.md.with-panel-right-reveal .views,
.device-ios.md.with-panel-transitioning .views,
.device-ios.md.with-panel-left-reveal .framework7-root>.view,
.device-ios.md.with-panel-right-reveal .framework7-root>.view,
.device-ios.md.with-panel-transitioning .framework7-root>.view {
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
}

@-webkit-keyframes ios-page-next-to-current {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
}

@keyframes ios-page-next-to-current {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
}

@-webkit-keyframes ios-page-previous-to-current {
    from {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
}

@keyframes ios-page-previous-to-current {
    from {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }
    to {
        -webkit-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
}

@-webkit-keyframes ios-page-current-to-previous {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }
}

@keyframes ios-page-current-to-previous {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(-20%, 0, 0);
        transform: translate3d(-20%, 0, 0);
    }
}

@-webkit-keyframes ios-page-current-to-next {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@keyframes ios-page-current-to-next {
    from {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}

@-webkit-keyframes ios-page-next-to-current-shadow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ios-page-next-to-current-shadow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes ios-page-previous-to-current-opacity {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes ios-page-previous-to-current-opacity {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@-webkit-keyframes ios-page-current-to-previous-opacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ios-page-current-to-previous-opacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes ios-page-current-to-next-shadow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes ios-page-current-to-next-shadow {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@-webkit-keyframes ios-navbar-element-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ios-navbar-element-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes ios-navbar-element-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes ios-navbar-element-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

The 5 Types of Animation - A Beginner's Guide
This guide breaks down the five different types of animation, and what you'll need to start animating with each animation type (software, schools...
Read more >
Animation Types - Keyshot Manual
Part Animations: Part animations affect your model's position, orientation, and visibility in the scene. This can be either a Transform animation or a...
Read more >
Animation tab - Unity - Manual
Animation Clips are the smallest building blocks of animation in Unity. They represent an isolated piece of motion, such as RunLeft, Jump, ...
Read more >
Animate, share, or save drawings in Pages on Mac
If you later open the document in Pages for Mac, you can animate the drawing, share it, or save it to Photos as...
Read more >
animation - CSS: Cascading Style Sheets - MDN Web Docs
The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[v3] CSS minification error on framework7.css 3.1.0 with vue-cli 3

Next page

[v3][bug] Routes (again) and double back