CSS3：Angular.js 的目标选择器答案

【问题标题】：CSS3 :target selector with Angular.jsCSS3：Angular.js 的目标选择器
【发布时间】：2013-11-14 12:01:36
【问题描述】：

我正在尝试使用 :target 为抽屉动画实现 CSS3 选择器，但没有运气。使用 $locationProvider.html5Mode(false);动画不工作。将该功能设置为“true”允许我 :target 选择器，但路由不起作用并显示任何内容。

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers',
  'myApp.services'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/view1'});

  $locationProvider.html5Mode(false);
}]);


...
<ul>
   <li><a href="#view1">item 1</a></li>
   <li><a href="#view2">item 2</a></li>
</ul>

有人有什么建议或想法吗？

【问题讨论】：

标签： css angularjs target firefox-os drawer

【解决方案1】：

使用参考应用上手，使用ng-animate集成动画：

    <html ng-app="demo">
      <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
        <link rel="stylesheet" href="https://rawgithub.com/daneden/animate.css/master/animate.css">
    
        <style>
          a {
            font-size: 300%;
          }
          #Squidward:target { color: red }
        </style>
        
        <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
        <script>
          angular.module('demo', [
          ]).controller('MainCtrl', function(
            $scope
          ){
            $scope.items = [{
              name: 'Squidward'
            }, {
              name: 'Plankton'
            }];
            
            $scope.add = function() {
              $scope.items.push({
                name: 'Patrick'
              });
            };
          });
        </script>
      </head>
      
      <body ng-controller="MainCtrl">
        <div>
          <a href="#Squidward" ng-click="add()">Add More Patrick</a>
          <ul>
            <li ng-repeat="item in items" ng-animate="{
              enter: 'animated flip'
            }">
              <a id={{item.name}}>{{item.name}}</a>
            </li>
          </ul>
        </div>
      </body>
    
    </html>

参考文献

【讨论】：