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！

因此，如果您点击大红色方块，它会动画到新页面。然后点击＆＃34;返回＆＃34;链接你会看到问题。

点击蓝色方块时我也遇到了问题。

Answer 1

将后退链接更改为

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

关于蓝盒子。您在templateUrl中有拼写错误（即ttemplateUrl）

休假时Angular.js 1.2+动画问题

1 个答案: