javascript - 卡片轮播Angularjs

Question

我正在尝试实现这个动画

行话.html

<ion-view title="Jargon">
  <ion-content>
    <a class="item" href="#/jargon"></a>

<div class="container">

  <div data-card="4" class="card"><span>Click Me</span></div>
  <div data-card="3" class="card"><span>Click Me</span></div>
  <div data-card="2" class="card"><span>Click Me</span></div>
  <div data-card="1" class="card"><span>Click Me</span></div>
  <div data-card="0" class="card"><span>Click Me</span></div>

</div>
</ion-content>

控制器：jargonController.js

angular.module('starter.jargonController', ['ionic'])
.controller('jargonCtrl', function (){
    var rotate, timeline;

  rotate = function() {
    return $('.card:first-child').fadeOut(400, 'swing', function() {
      return $('.card:first-child').appendTo('.container').hide();
    }).fadeIn(400, 'swing');
  };

  timeline = setInterval(rotate, 1200);

  $('.card').click(function() {
    return rotate();
  });

});

我收到此错误：

错误：$ 未定义 @ http://localhost:8100/js/controllers

ReferenceError: $ 未定义

正是这一行产生了错误：

    return $('.card:first-child').fadeOut(400, 'swing', function() {

我错过了什么？

更新

这就是我得到布局的方式。似乎它没有看到 css 文件。

虽然我确保在这里添加它：

.state('jargon', {
        url: 'jargon',
        templateUrl: 'templates/jargon.html',
        controller: 'jargonCtrl',
        css: 'css/jarg.css'

Answer 1

您可能缺少 jQuery，如果您想坚持使用 jQuery，可以将其包含在https://jquery.com/中。

或者您可以使用 Angular 使用不同的方法：

<ion-view title="Jargon">
  <ion-content>
    <a class="item" href="#/jargon"></a>

    <div class="container">

      <div ng-repeat="n in [0,1,2,3,4]" class="card"><span ng-click="rotate()">Click Me</span></div>

    </div>
    </ion-content>

和：

angular.module('starter.jargonController', ['ionic'])
        .controller('jargonCtrl', ['$scope', function ($scope) {
                $scope.rotate = function () {
                    //angular code for your animation
                };
            }]);