卡轮安古拉杰

Question

我正在尝试实现这个动画

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

});

我知道这个错误：

错误：$未定义@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/。

或者，您可以使用另一种方法使用角：

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