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）中有拼写错误