Question

我努力让任何有角度的动画都能奏效。很多文档似乎已经过时了，我很难找到可以开始工作的最新资源。

我目前的项目是一个光标签角度rss饲料阅读器，我可以告诉它应该工作，但事实并非如此。以下是代码无动画http://theodore-q.github.io/codeschool/exersise2copy/angular.html

的工作示例

<html ng-app="NewsFeeds">
<head>
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "app.css" rel = "stylesheet">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.js"></script>
<script type="text/javascript" src="js/jsapi"></script>
<script type="text/javascript" src="app.js"></script>


</head>
<body ng-controller="NewsController as news">
<section ng-controller="PanelController as panel">
    <ul class="nav nav-pills">
        <li ng-class="{active:panel.isSelected(1) }"> 
            <a href ng-click="panel.selectTab(1)">BBC</a>
        </li>
        <li ng-class="{ active: panel.isSelected(2)}"> 
            <a href ng-click="panel.selectTab(2)"> The Telegraph</a> 
        </li>
        <li ng-class="{ active: panel.isSelected(3)}"> 
            <a href ng-click="panel.selectTab(3)">The Guardian</a> 
        </li>
        <li ng-class="{ active: panel.isSelected(4)}"> 
            <a href ng-click="panel.selectTab(4)">Leicester Mercury</a> 
        </li>
    </ul>
    <div class="panel" ng-show="panel.isSelected(1)">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="article in bbc">
                <h3>
                    <a href={{article.link}}>{{article.title}}</a>
                    <em class="pull-right">{{article.author}}</em>
                </h3>
                <h4>
                    <p>{{article.contentSnippet}}</p>
                </h4>
            </li>
        </ul>
    </div>
    <div class="panel" ng-show="panel.isSelected(2)">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="article in telegraph">
                <h3>
                    <a href={{article.link}}>{{article.title}}</a>
                    <em class="pull-right">{{article.author| limitTo : 20}}</em>
                </h3>
                <h4>
                    <p>{{article.contentSnippet}}</p>
                </h4>
            </li>
        </ul>
    </div>
    <div class="panel" ng-show="panel.isSelected(3)">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="article in guardian">
                <h3>
                    <a href={{article.link}}>{{article.title}}</a>
                    <em class="pull-right">{{article.author | limitTo : 20}}</em>
                </h3>
                <h4>
                    <p>{{article.contentSnippet}}</p>
                </h4>
            </li>
        </ul>
    </div>
    <div class="panel" ng-show="panel.isSelected(4)">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="article in mercury">
                <h3>
                    <a href={{article.link}}>{{article.title}}</a>
                    <em class="pull-right">{{article.author | limitTo : 20}}</em>
                </h3>
                <h4>
                    <p>{{article.contentSnippet}}</p>
                </h4>
            </li>
        </ul>
    </div>              
</section>
</body>
</html>

Css应该是大多数魔法发生的地方

.panel {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.panel.ng-hide-add.ng-hide-add-active,
.panel.ng-hide-remove.ng-hide-remove-active{
  display:block!important;
  -webkit-transition:all linear 1s;
  transition:all linear 1s;
}

.panel.ng-hide {
  line-height:0;
  opacity:0;
  margin:0 10px 0 -234px;
}

和Javascript：

(function(){
  var app = angular.module('NewsFeeds', ['ngAnimate']);
  app.controller('NewsController', function($scope,$http) {

  //$http is working in this
  function httpRequest(url,tag){
  $http({
  method: 'JSONP',
  url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q="+url+"&callback=JSON_CALLBACK"

    }).success(function(data, status, headers, config) {
      // data contains the response
      $scope[tag] = data.responseData.feed.entries;
      console.log(tag);

    }).error(function(data, status, headers, config) {
    });
  }

    httpRequest('http://www.telegraph.co.uk/news/uknews/rss','telegraph');{}
    httpRequest('http://feeds.bbci.co.uk/news/rss.xml','bbc');{}
    httpRequest('http://www.theguardian.com/uk/rss','guardian');{}
    httpRequest('http://www.leicestermercury.co.uk/all-content.rss','mercury');{}

  });
    app.controller('PanelController', function (){
    this.tab = 1;

      this.selectTab = function (setTab){
        this.tab = setTab;
      };
      this.isSelected = function(checkTab) {
        return this.tab === checkTab;
    };
  });

})();

如何正确配置Ng-animate

0 个答案: