Карточка Карусель Angularjs

Question

Карточка Карусель Angularjs

0

Я пытаюсь реализовать эту анимацию

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/контроллеры

ReferenceError: $ не определено

Именно эта строка генерирует ошибку:

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

что мне не хватает?

ОБНОВИТЬ

Вот как я получил макет. Кажется, что он не видит файл css.

Хотя я обязательно добавил его здесь:

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

Hana 31 март 2016, в 16:32

Источник

Теги:

javascript

ionic-framework

angularjs

animation

ng-controller

1 ответ

Ещё вопросы

Groben · Accepted Answer · 2016-03-31T13-17-00.000Z

Вероятно, вам не хватает 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
                };
            }]);

Спасибо. Это не работает: ReferenceError: $ не определено в 'return $ ('. Card: first-child '). FadeOut (400,' swing ', function ()'
Может быть, проверить заказы вашего импорта, импортируется ли jQuery до его вызова?
Спасибо, я забыл это. Я обновил свой пост. Ошибка исчезла, но анимация все равно не появляется: /
я не уверен, что вы можете сделать это: css: 'css / jarg.css' вам, вероятно, нужно импортировать файл css в <head>
Ты прав. Я использовал <script>, чтобы импортировать его вместо <link href = "css / jargon.css" rel = "stylesheet" />: D Thx