Angular.js 1.2+ проблема с анимацией в отпуске

Question

У меня проблема с угловыми антивирусами и маршрутами. Я сделал 2 страницы, которые, когда вы нажимаете на кнопку ссылки, должны перейти на новую страницу справа, а когда вы перейдете назад, старая страница должна сдвинуться с левой стороны.

Первая анимация при переключении на новую страницу. Но при нажатии кнопки назад что-то странное происходит, и я не могу понять, Что вопрос .. Мой CSS выглядит следующим образом:

/* menu ------------------------ */ 
.menu.ng-leave  { 
    -webkit-animation:slideOutLeft 0.5s both ease-in; 
    -moz-animation:slideOutLeft 0.5s both ease-in; 
    animation:slideOutLeft 0.5s both ease-in; 
} 
.menu.ng-enter  { 
    -webkit-animation:slideInLeft 0.5s both ease-in; 
    -moz-animation:slideInLeft 0.5s both ease-in; 
    animation:slideInLeft 0.5s both ease-in;  
} 
/* slide in from the right */ 
@keyframes slideInRight { 
    from { transform:translateX(100%); } 
    to  { transform: translateX(0); } 
} 
@-moz-keyframes slideInRight { 
    from { -moz-transform:translateX(100%); } 
    to  { -moz-transform: translateX(0); } 
} 
@-webkit-keyframes slideInRight { 
    from { -webkit-transform:translateX(100%); } 
    to  { -webkit-transform: translateX(0); } 
} 
/* slide out right */ 
@keyframes slideOutRight { 
    to  { transform: translateX(100%); } 
} 
@-moz-keyframes slideOutRight { 
    to  { -moz-transform: translateX(100%); } 
} 
@-webkit-keyframes slideOutRight { 
    to  { -webkit-transform: translateX(100%); } 
} 

/* Issue ------------------------ */ 
.issue.ng-leave  { 
    -webkit-animation:slideOutRight 0.5s both ease-in; 
    -moz-animation:slideOutRight 0.5s both ease-in; 
    animation:slideOutRight 0.5s both ease-in; 
} 
.issue.ng-enter   { 
    -webkit-animation:slideInRight 0.5s both ease-in; 
    -moz-animation:slideInRight 0.5s both ease-in; 
    animation:slideInRight 0.5s both ease-in;  
} 
/* slide in from the left */ 
@keyframes slideInLeft { 
    from { transform:translateX(-100%); } 
    to  { transform: translateX(0); } 
} 
@-moz-keyframes slideInLeft { 
    from { -moz-transform:translateX(-100%); } 
    to  { -moz-transform: translateX(0); } 
} 
@-webkit-keyframes slideInLeft { 
    from { -webkit-transform:translateX(-100%); } 
    to  { -webkit-transform: translateX(0); } 
} 
/* slide out left */ 
@keyframes slideOutLeft { 
    to  { transform: translateX(-100%); } 
} 
@-moz-keyframes slideOutLeft { 
    to  { -moz-transform: translateX(-100%); } 
} 
@-webkit-keyframes slideOutLeft { 
    to  { -webkit-transform: translateX(-100%); } 
} 

Я сделал Plunker demo!

Так что, если вы нажмете на большой красный квадрат, это оживит новую страницу. Затем, щелкнув ссылку «назад», вы увидите проблему.

У меня также есть проблема при нажатии на синий квадрат, ничего не происходит.

Answer 1

Изменить обратную ссылку на

<a href="#/" class="btn btn-success btn-lg">BACK</a> 

И в отношении к синей коробке. У вас есть орфографическая ошибка в templateUrl (т. Е. TtemplateUrl)