Fatal编程技术网
  • javascript/
  • Javascript AngularJS-如何为动态编译和添加的ng include设置动画

Javascript AngularJS-如何为动态编译和添加的ng include设置动画

javascript css animation angularjs

Javascript AngularJS-如何为动态编译和添加的ng include设置动画,javascript,css,animation,angularjs,Javascript,Css,Animation,Angularjs,我有下面的AngularJS（v1.1.4）代码，我正在尝试淡入（动画化）将ng添加到DOM时包含的内容。我做错了什么？此外，如果有人能建议一种更好的方法，将add/set/remove命令传递给指令，而不是观察“action”属性，那将非常感谢 普朗克在这里： index.html <!doctype html> <html ng-app="plunker" > <head> <meta charset="utf-8"> <titl

我有下面的AngularJS（v1.1.4）代码，我正在尝试淡入（动画化）将ng添加到DOM时包含的内容。我做错了什么？此外，如果有人能建议一种更好的方法，将add/set/remove命令传递给指令，而不是观察“action”属性，那将非常感谢

普朗克在这里：

index.html

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="styles.css" />
  <script>document.write('<base href="' + document.location + '" />');</script>
  <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">

  <button ng-click="loadPartial('partial1.html')">Click to load partial 1</button>
  <button ng-click="loadPartial('partial2.html')">Click to load partial 2</button>
  <button ng-click="loadPartial('partial3.html')">Click to load partial 3</button>

  <div views></div>

</body>
</html>
partial1.html

<div>Hello I am a partial 1</div>

你好，我是部分1
partial2.html

<div>PARTIAL 2-------------------</div>

第2部分-------------------
partial3.html

<div>
33333333333333333333333333
<br />
this is partial 3
<br />
33333333333333333333333333
</div>


33333333333333333333333333


这是第三部分


33333333333333333333333333
如果您仍然感兴趣，我今天不小心创建了一个plunker，它应该可以回答您很久以前的问题

现在，在最新的1.2稳定版本中，如果angular发现ngAnimate模块，它将向dom添加特定的css类，当一个内置指令（如ng if、ng switch、ng view）检测到一个子对象已更改时。这些类会触发css转换，因此，如果加载视图部分需要很长时间，动画将在完全加载时启动

index.html：

<div class="view-animate-container">
  <div class="well slide" ng-view>
    <!-- view container. Asynchronously loaded view templates are placed here -->
  </div>
</div>
我遇到了同样的问题。但是，动画视图下内容的行为将是跳跃的和不希望的。看这个

因此，为了扩展@angabriel的答案，我研究了另一种方法。请参阅以下内容，这是对@angabriel工作的修改。您需要使用Chrome来查看它的工作情况，因为我没有机会为其他浏览器添加css

主要区别在于CSS。值得一提的是，我必须覆盖以下内容：

  • 最小高度
  • 页边距顶部
  • 页边距底部
  • padding top
  • 填充底部
为了使转换平滑，因为bootstrap添加了一些规则，一旦从DOM中删除了离开的元素，转换就会变得跳跃

/* CSS */
.view-animate-container > .slide.ng-enter,
.view-animate-container > .slide.ng-leave {
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s;
    width: 100%;
    position: relative;
}

.view-animate-container > .slide.ng-enter {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation: slideIn .5s;
    animation: slideIn .5s;
}

.view-animate-container > .slide.ng-leave {
    -webkit-animation-name: slideOut;
    animation-name: slideOut;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation: slideOut .5s;
    animation: slideOut .5s;
}

@keyframes slideOut {
    from {
        opacity: 1;
        max-height: 500px;
    }
    50% {
        opacity: 0;
        max-height: 0px;
        margin-top: 0;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    to {
        opacity: 0;
        max-height: 0px;
        margin-top: 0;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        max-height: 0px;
        margin-top: 0;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    50% {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}
赞成的意见 视图div下面的内容不会跳跃

欺骗 内容高度：如果视图内容大于
500px
（在我的例子中），它将动画设置为500px，然后跳到其全高（正如Isaac所指出的）

谢谢

此方法的唯一问题是必须设置最大高度。在您的示例中，超过500px高度的内容将跳转到500px高度，然后在剩余部分设置动画。@issac，是的。我们必须妥协。我只是提供了另一个选择，有不同的优势和劣势。最后，每个开发人员将决定实现哪种方法（如果有的话）。 
<div class="view-animate-container">
  <div class="well slide" ng-view>
    <!-- view container. Asynchronously loaded view templates are placed here -->
  </div>
</div>

angular.module('myApp', ['ngRoute', 'ngAnimate'])
.run(function($rootScope, $location){
  $rootScope.matchesRoute = function() {
    for(var i=0; i<arguments.length; i++) {
      if($location.path() === arguments[i]) {
        return true;
      }
    }
    return false;
  }
})
.config(function($routeProvider) {
    $routeProvider
      .when('/bellsAndWhistles', {templateUrl: 'bellsAndWhistles.html', controller: angular.noop()})
      .when('/about',            {templateUrl: 'about.html',            controller: angular.noop()})
      .otherwise({redirectTo: '', templateUrl: 'home.html'});
});

html, body{
  height: 100%;
}

.view-animate-container {
    position: relative;
    overflow: hidden;
    height:100%;
}

.view-animate-container > .slide.ng-enter,
.view-animate-container > .slide.ng-leave {
    -webkit-transition: all ease 0.5s;
       -moz-transition: all ease 0.5s;
         -o-transition: all ease 0.5s;
            transition: all ease 0.5s;  
    width: 100%;
    position:absolute;
}

.view-animate-container > .slide.ng-enter {
    left:100%;
    opacity: 0;
}
.view-animate-container > .slide.ng-enter.ng-enter-active {
    left:0;
    opacity: 1;
}
.view-animate-container > .slide.ng-leave.ng-leave-active {
    left: -100%;
    opacity: 0;
}

/* CSS */
.view-animate-container > .slide.ng-enter,
.view-animate-container > .slide.ng-leave {
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    transition: all ease 0.5s;
    width: 100%;
    position: relative;
}

.view-animate-container > .slide.ng-enter {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation: slideIn .5s;
    animation: slideIn .5s;
}

.view-animate-container > .slide.ng-leave {
    -webkit-animation-name: slideOut;
    animation-name: slideOut;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation: slideOut .5s;
    animation: slideOut .5s;
}

@keyframes slideOut {
    from {
        opacity: 1;
        max-height: 500px;
    }
    50% {
        opacity: 0;
        max-height: 0px;
        margin-top: 0;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    to {
        opacity: 0;
        max-height: 0px;
        margin-top: 0;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        max-height: 0px;
        margin-top: 0;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    50% {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}