| RTL Ionic 2 App Nav Animation |

[wis]

Hey Ionions! I'm stuck on making Ionic RTL to use in my app today, I've made some progress, I used the win froms app I made two weeks ago [(LTRtoRTL repo)](https://github.com/wesamco/LTRtoRTL), to convert the css to RTL, basically it flips everything, left to right, and right to left, but that's all because no animations fliping to RTL i'm not a css wizard. then I looked how Nav Animation works in Ionic and found out this in bundle.js, I made some edits I flipped the var OFF_LEFT = '33%'; to var OFF_LEFT = '-33%'; and var OFF_RIGHT = '-99.5%'; to var OFF_RIGHT = '99.5%'; right now i'm stuck on how is that black side bar animating in when the back nav animation plays (I think it's just the current nav animating to the right 33% and the background of a tab is black color so it appears), and how to put the back > button on the left?

this should not be done like that, by rtl apps developers, the ionic docs only recommends setting the language attribute to the correct language (Arabic (ar) in my case) and the correct direction (RTL) doing just that does not add the correct animations functionality for RTL Mobile applications, I suggest on this Issue that Animation Directions can be set in App Configurations, like BackButtonText.

`/**/ },
/ 359 */
function(module, exports, webpack_require) {

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var animation_1 = __webpack_require__(306);
var transition_1 = __webpack_require__(305);
var DURATION = 500;
var EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
var OPACITY = 'opacity';
var TRANSLATEX = 'translateX';
var OFF_RIGHT = '99.5%';
var OFF_LEFT = '-33%';
var CENTER = '0%';
var OFF_OPACITY = 0.8;
var SHOW_BACK_BTN_CSS = 'show-back-button';
var IOSTransition = (function (_super) {
    __extends(IOSTransition, _super);
    function IOSTransition(enteringView, leavingView, opts) {
        _super.call(this, opts);
        this.duration(opts.duration || DURATION);
        this.easing(opts.easing || EASING);
        // what direction is the transition going
        var backDirection = (opts.direction === 'back');
        // do they have navbars?
        var enteringHasNavbar = enteringView.hasNavbar();
        var leavingHasNavbar = leavingView && leavingView.hasNavbar();
        var enteringPage = new animation_1.Animation(enteringView.pageRef());
        enteringPage.before.addClass('show-page');
        this.add(enteringPage);
        // entering content
        var enteringContent = new animation_1.Animation(enteringView.contentRef());
        this.add(enteringContent);
        if (backDirection) {
            // entering content, back direction
            enteringContent
                .fromTo(TRANSLATEX, OFF_LEFT, CENTER, true)
                .fromTo(OPACITY, OFF_OPACITY, 1, true);
        }
        else {
            // entering content, forward direction
            enteringContent
                .before.clearStyles([OPACITY])
                .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
        }
        if (enteringHasNavbar) {
            // entering page has a navbar
            var enteringNavBar = new animation_1.Animation(enteringView.navbarRef());
            enteringNavBar.before.addClass('show-navbar');
            this.add(enteringNavBar);
            var enteringTitle = new animation_1.Animation(enteringView.titleRef());
            var enteringNavbarItems = new animation_1.Animation(enteringView.navbarItemRefs());
            var enteringNavbarBg = new animation_1.Animation(enteringView.navbarBgRef());
            var enteringBackButton = new animation_1.Animation(enteringView.backBtnRef());
            enteringNavBar
                .add(enteringTitle)
                .add(enteringNavbarItems)
                .add(enteringNavbarBg)
                .add(enteringBackButton);
            enteringTitle.fadeIn();
            enteringNavbarItems.fadeIn();
            // set properties depending on direction
            if (backDirection) {
                // entering navbar, back direction
                enteringTitle.fromTo(TRANSLATEX, OFF_LEFT, CENTER, true);
                if (enteringView.enableBack()) {
                    // back direction, entering page has a back button
                    enteringBackButton
                        .before.addClass(SHOW_BACK_BTN_CSS)
                        .fadeIn();
                }
            }
            else {
                // entering navbar, forward direction
                enteringTitle.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
                if (leavingHasNavbar) {
                    // entering navbar, forward direction, and there's a leaving navbar
                    // should just fade in, no sliding
                    enteringNavbarBg
                        .before.clearStyles([TRANSLATEX])
                        .fadeIn();
                }
                else {
                    // entering navbar, forward direction, and there's no leaving navbar
                    // should just slide in, no fading in
                    enteringNavbarBg
                        .before.clearStyles([OPACITY])
                        .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
                }
                if (enteringView.enableBack()) {
                    // forward direction, entering page has a back button
                    enteringBackButton
                        .before.addClass(SHOW_BACK_BTN_CSS)
                        .fadeIn();
                    var enteringBackBtnText = new animation_1.Animation(enteringView.backBtnTextRef());
                    enteringBackBtnText.fromTo(TRANSLATEX, '100px', '0px');
                    enteringNavBar.add(enteringBackBtnText);
                }
                else {
                    enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS);
                }
            }
        }
        // setup leaving view
        if (leavingView) {
            // leaving content
            var leavingContent = new animation_1.Animation(leavingView.contentRef());
            this.add(leavingContent);
            if (backDirection) {
                // leaving content, back direction
                leavingContent
                    .before.clearStyles([OPACITY])
                    .fromTo(TRANSLATEX, CENTER, '100%');
            }
            else {
                // leaving content, forward direction
                leavingContent
                    .fromTo(TRANSLATEX, CENTER, OFF_LEFT)
                    .fromTo(OPACITY, 1, OFF_OPACITY);
            }
            if (leavingHasNavbar) {
                // leaving page has a navbar
                var leavingNavBar = new animation_1.Animation(leavingView.navbarRef());
                var leavingBackButton = new animation_1.Animation(leavingView.backBtnRef());
                var leavingTitle = new animation_1.Animation(leavingView.titleRef());
                var leavingNavbarItems = new animation_1.Animation(leavingView.navbarItemRefs());
                var leavingNavbarBg = new animation_1.Animation(leavingView.navbarBgRef());
                leavingNavBar
                    .add(leavingBackButton)
                    .add(leavingTitle)
                    .add(leavingNavbarItems)
                    .add(leavingNavbarBg);
                this.add(leavingNavBar);
                // fade out leaving navbar items
                leavingBackButton.fadeOut();
                leavingTitle.fadeOut();
                leavingNavbarItems.fadeOut();
                if (backDirection) {
                    // leaving navbar, back direction
                    leavingTitle.fromTo(TRANSLATEX, CENTER, '100%');
                    if (enteringHasNavbar) {
                        // leaving navbar, back direction, and there's an entering navbar
                        // should just fade out, no sliding
                        leavingNavbarBg
                            .before.clearStyles([TRANSLATEX])
                            .fadeOut();
                    }
                    else {
                        // leaving navbar, back direction, and there's no entering navbar
                        // should just slide out, no fading out
                        leavingNavbarBg
                            .before.clearStyles([OPACITY])
                            .fromTo(TRANSLATEX, CENTER, '100%');
                    }
                    var leavingBackBtnText = new animation_1.Animation(leavingView.backBtnTextRef());
                    leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (300) + 'px');
                    leavingNavBar.add(leavingBackBtnText);
                }
                else {
                    // leaving navbar, forward direction
                    leavingTitle.fromTo(TRANSLATEX, CENTER, OFF_LEFT);
                }
            }
        }
    }
    return IOSTransition;
})(transition_1.Transition);
transition_1.Transition.register('ios-transition', IOSTransition);

// },
/ 360 /
// function(module, exports, webpack_require) {

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var animation_1 = __webpack_require__(306);
var transition_1 = __webpack_require__(305);
var TRANSLATEY = 'translateY';
var OFF_BOTTOM = '40px';
var CENTER = '0px';
var SHOW_BACK_BTN_CSS = 'show-back-button';
var MDTransition = (function (_super) {
    __extends(MDTransition, _super);
    function MDTransition(enteringView, leavingView, opts) {
        _super.call(this, opts);
        // what direction is the transition going
        var backDirection = (opts.direction === 'back');
        // do they have navbars?
        var enteringHasNavbar = enteringView.hasNavbar();
        var leavingHasNavbar = leavingView && leavingView.hasNavbar();
        // entering content item moves in bottom to center
        var enteringPage = new animation_1.Animation(enteringView.pageRef());
        enteringPage.before.addClass('show-page');
        this.add(enteringPage);
        if (backDirection) {
            this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
            enteringPage.before.clearStyles([TRANSLATEY]);
        }
        else {
            this.duration(opts.duration || 280).easing('cubic-bezier(0.36,0.66,0.04,1)');
            enteringPage
                .fromTo(TRANSLATEY, OFF_BOTTOM, CENTER, true)
                .fadeIn();
        }
        if (enteringHasNavbar) {
            var enteringNavBar = new animation_1.Animation(enteringView.navbarRef());
            enteringNavBar.before.addClass('show-navbar');
            this.add(enteringNavBar);
            var enteringBackButton = new animation_1.Animation(enteringView.backBtnRef());
            this.add(enteringBackButton);
            if (enteringView.enableBack()) {
                enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS);
            }
            else {
                enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS);
            }
        }
        // setup leaving view
        if (leavingView && backDirection) {
            // leaving content
            this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
            var leavingPage = new animation_1.Animation(leavingView.pageRef());
            this.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fadeOut());
        }
    }
    return MDTransition;
})(transition_1.Transition);
transition_1.Transition.register('md-transition', MDTransition);

`

[dylanvdmerwe]

Pretty certain official RTL support is scheduled for beta 12.

[wis]

@dylanvdmerwe i'm glad to hear that.
this video on YouTube demonstrates how the correct Behaviours of the IOS application should be, it's title is IOS9 fully supports Arabic
I've managed to get the same behaviour after some fiddling, I think that's equivalent, I just need to change the BackButtonIcon to forward and vice versa.

[brandyscarney]

Thanks for the detailed issue! We do have an open issue for RTL support here: #5035

Please add any issues/feedback to that issue. Thanks. 😄

[wis]

I am happy to contribute to the most awesome framework.
I figured out How I did it:
changed
var OFF_RIGHT = '99.5%';
to
var OFF_RIGHT = '-99.5%';
and
var OFF_LEFT = '-33%';
to
var OFF_LEFT = '33%';
and

                if (backDirection) {
                    // leaving content, back direction
                    leavingContent
                        .before.clearStyles([OPACITY])
                        .fromTo(TRANSLATEX, CENTER, '100%');
                }

to

                if (backDirection) {
                    // leaving content, back direction
                    leavingContent
                        .before.clearStyles([OPACITY])
                        .fromTo(TRANSLATEX, CENTER, '-100%');
                }

in ionic-angular/transitions/transition-ios

[wis]

after adding dir="rtl" to index.html, the rendering of elements will start from right, that affects the look of some elements, like the segment button.
to fix it I changed

  .segment-button:first-of-type {
    border-radius: 4px 0 4px 0;
    margin-left: 0; }
  .segment-button:not(:first-of-type) {
    border-left-width: 0; }
  .segment-button:last-of-type {
    border-left-width: 0;
    border-radius: 4px 0 0 4px;
    margin-left: 0; }

to

  .segment-button:first-of-type {
    border-radius: 4px 0 0 4px;
    margin-right: 0; }
  .segment-button:not(:first-of-type) {
    border-right-width: 0; }
  .segment-button:last-of-type {
    border-right-width: 0;
    border-radius: 0 4px 4px 0;
    margin-right: 0; }

[zulucoding]

good job bro

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.