Question

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

我想使用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

如果你以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);


        }
}
});

工作演示：

＆＃13;

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);
         }
    }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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>

AngularJS动画DIV从页面底部到顶部加载 - 幻灯片

2 个答案: