AngularJS 在页面加载时从下到上对 DIV 进行动画处理 - Slideup

Question

在我当前的项目中，我需要在页面加载期间为我的主要内容div实现上滑功能，即类似于jQuery animate。

我想使用directive来实现这一点，以保持代码干净，而不是将其放入控制器中。我能够通过jQuery使用以下代码来实现它，但是当与AngularJS集成时，这不起作用。任何帮助都非常感谢。

Css：

.cont-gall{
    overflow:scroll;
    width: 100%;
    float: left;
    top: 850px;
    padding:0 0 280px 0px;
    position: relative; 
    height:700px;
    -ms-overflow-style: none;
}

我在document.ready()中应用这个 jQuery，当页面内容是静态的时，它工作正常，但是当我应用 AngularJs 加载内容时，它就不行了。

$('.cont-gall').animate({'top': '50px'}, 3500); 

Answer 1

您可以为此创建一个简单的指令：

angular.module('demoApp').directive('animatedToTop', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $(element).animate({
        'top': '50px'
      }, 3500);
    }
  }
});

在视图中：

<div class="cont-gall" animated-to-top></div>

Answer 2

如果你

以jquery的方式做，你做得不对：

在角度前瞻性地做这件事

您可以创建一个可以在 DOM/html 中使用的directive，在该指令中，您可以initially提供一个类来设置元素的过渡时间和样式linking并且在阶段您可以应用transition changes class

 <cont class="myDiv">abcd</cont>

对于动画，您可以使用 css3 过渡

.myDiv{
    position:absolute;
   -webkit-transition: 1s linear;
    /*to only change opacity*/
    /*-webkit-transition: opacity 1s linear*/
   -moz-transition: 1s linear;
   -o-transition: 1s linear;
   transition: 1s linear;

}
.animateTop{
    top:10px;
}

命令

var app = angular.module('myApp',[]);
app.directive('cont', function () {       
    return {
      restrict:"E",
      link: function(scope, element, attrs) {   
        element.addClass('animateTop');
            $compile(element)(scope);

        }
}
});

工作演示：

var app = angular.module('myApp',[]);
app.directive('cont', function () {       
  
    return {
      restrict:"E",
     //template:"<div class='myDiv'>aa</div>",
      link: function(scope, element, attrs) {   
          element.addClass('animateTop');
            $compile(element)(scope);
         }
    }
});

.myDiv{
  display:block;
    width:200px;
  color:black;
  background:red;
    position:absolute;
   -webkit-transition: 1s linear;
    /*to only change opacity*/
    /*-webkit-transition: opacity 1s linear*/
   -moz-transition: 1s linear;
   -o-transition: 1s linear;
   transition: 1s linear;
}
.animateTop{
 background:pink;
    top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp">
<cont class="myDiv">abcd</cont>
  
  </div>