卡片轮播 Angularjs

Question

我正在尝试实施 this animation

Jargon.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();
  });

});

我收到这个错误：

Error: $ is not defined @http://localhost:8100/js/controllers

ReferenceError: $ is not defined

正是这一行产生了错误：

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

卡片轮播 Angularjs

Card Carousel Angularjs

javascript

animation

angularjs

ionic-framework

ng-controller