CSS3：與Angular.js的目標選擇器

我想實現CSS3選擇器使用：目標爲抽屜動畫，沒有運氣。使用$ locationProvider.html5Mode（false）;動畫不起作用。將該功能轉換爲「true」允許我：目標選擇器，但路由不工作並顯示任何內容。CSS3：與Angular.js的目標選擇器

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>

任何人有一個建議或想法？

來源

2013-11-14 fran

使用參考應用程序上手，並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="[email protected]" 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>

參考

來源

2014-07-09 16:05:04

CSS3：與Angular.js的目標選擇器

回答

相關問題