【问题标题】:ngAnimate not adding ng-enter class to ng-view in Angular 1.2ngAnimate 未在 Angular 1.2 中将 ng-enter 类添加到 ng-view
【发布时间】:2014-08-22 01:39:29
【问题描述】:

我一直在网上搜索这个问题的答案,但我似乎找不到任何明确的答案。

问题似乎是当路由发生变化时,ngAnimate 指令没有添加类ng-enter 或ng-leave。我创建了一个测试应用程序并将ngAnimate 指令包含到应用程序中。我还创建了动画类并将该类应用于ng-view 元素

我的测试应用的链接在这里:http://plnkr.co/edit/6qCMeIkWeXeTQyDWcu29?p=preview

【问题讨论】:

    标签: javascript angularjs angularjs-directive ng-animate ng-view


    【解决方案1】:

    只需为每个浏览器添加每个供应商的前缀,例如chrome 的 -webkit 在你的 css 文件中

    FORKED PLUNKER

    .slide.ng-enter, .slide.ng-leave{
      position: absolute;
    }
    
    .slide.ng-enter { 
      animation: slideInRight 0.5s both ease-in; z-index: 8888; 
      -webkit-animation: slideInRight 0.5s both ease-in; z-index: 8888; 
    }
    .slide.ng-leave { 
      animation: slideOutLeft 0.5s both ease-in; z-index: 9999; 
      -webkit-animation: slideOutLeft 0.5s both ease-in; z-index: 9999; 
    }
    
    
    @keyframes slideOutLeft {
        to      { transform: translateX(-100%); }
    }
    
    @-webkit-keyframes slideOutLeft {
        to      { transform: translateX(-100%); }
    }
    
    
    @keyframes slideInRight {
        from    { transform: translateX(100%); }
        to      { transform: translateX(0); }
    }
    
    @-webkit-keyframes slideInRight {
        from    { transform: translateX(100%); }
        to      { transform: translateX(0); }
    }
    

    【讨论】:

    • 哇!我不敢相信这就是问题所在。为此,我已经把头撞到墙上好多年了!我认为,因为它甚至没有添加适当的类,所以 Angular 有问题。感谢您的帮助1
    • 什么!在过去的 3 个小时里,我一直在用键盘敲我的头。甚至我认为这是 Angular(与 CSS 无关)的错误,并且正在互联网上搜索该角度的解决方案。这不是 Angular 的错误吗?
    • 做了同样的事情 - 把我的 js 撕成碎片,认为这是一个有角的错误......愚蠢的 css!哈哈
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-28
    • 2013-12-28
    • 2017-05-06
    • 1970-01-01
    相关资源
    最近更新 更多