From 684d730cab06bf12b1983223cd24a7337594e127 Mon Sep 17 00:00:00 2001 From: Andrew Buss Date: Tue, 26 May 2015 01:37:50 -0700 Subject: [PATCH] refactor; trying to get animations working --- sass/feed_animations.scss | 18 +++++++++++++++++ sass/flashier.scss | 1 + scripts/FeedController.js | 25 +++++++++++++++++++----- scripts/FlashcardDirective.js | 10 ---------- styles/feed_animations.css | 10 ++++++++++ styles/flashier.css | 45 +++++++++++++++++++++++++++++++++++++++++++ templates/feed.html | 4 +--- 7 files changed, 95 insertions(+), 18 deletions(-) create mode 100644 sass/feed_animations.scss create mode 100644 styles/feed_animations.css diff --git a/sass/feed_animations.scss b/sass/feed_animations.scss new file mode 100644 index 0000000..0943f47 --- /dev/null +++ b/sass/feed_animations.scss @@ -0,0 +1,18 @@ +flashcard.ng-enter div, +flashcard.ng-leave div, +flashcard.ng-move div { + -webkit-transition: 1.5s linear all; + transition: 1.5s linear all; + background-color: red; +} + +flashcard.ng-move div, +flashcard.ng-leave.ng-leave-active div { + opacity: 0; +} + +flashcard.ng-move.ng-move.active div, +flashcard.ng-enter.ng-enter-active { + + opacity: 1; +} \ No newline at end of file diff --git a/sass/flashier.scss b/sass/flashier.scss index f018932..d77bba2 100644 --- a/sass/flashier.scss +++ b/sass/flashier.scss @@ -1 +1,2 @@ @import "materialize"; +@import "feed_animations"; \ No newline at end of file diff --git a/scripts/FeedController.js b/scripts/FeedController.js index 9898424..87b8be9 100644 --- a/scripts/FeedController.js +++ b/scripts/FeedController.js @@ -1,4 +1,4 @@ -angular.module('flashy.FeedController', ['ui.router']). +angular.module('flashy.FeedController', ['ui.router', 'ngAnimate']). controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) { console.log('Hello from feed'); @@ -13,7 +13,8 @@ angular.module('flashy.FeedController', ['ui.router']). return Math.max(1, Math.floor(avail / 250)); } - function refreshColumnWidth() { + $scope.refreshColumnWidth = function() { + console.log('refreshing column width'); avail = $window.innerWidth - 17; width = Math.floor(avail / Math.floor(avail / 250)); $('.cardColumn').css({ @@ -24,12 +25,11 @@ angular.module('flashy.FeedController', ['ui.router']). width: width - 12 + 'px', height: (width * 3 / 5) + 'px' }); - } + }; $scope.refreshLayout = function() { - refreshColumnWidth(); // check if we actually need to refresh the whole layout - if (calculate_cols() == $scope.numCols) return; + if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth(); $scope.numCols = calculate_cols(); console.log('refreshing layout for ' + $scope.numCols + ' columns'); $scope.cardCols = []; @@ -39,9 +39,12 @@ angular.module('flashy.FeedController', ['ui.router']). cols[i % $scope.numCols].push(card); }); // wait until the next digest cycle to update cardCols + $timeout(function() { $scope.cardCols = cols; + $timeout($scope.refreshColumnWidth); }); + }; angular.element($window).bind('resize', $scope.refreshLayout); @@ -71,6 +74,7 @@ angular.module('flashy.FeedController', ['ui.router']). } console.log('adding card to column ' + colNum); console.log(card); + $scope.cards.push(data); $timeout(function() { $scope.cardCols[colNum].unshift(card); }); @@ -142,6 +146,7 @@ angular.module('flashy.FeedController', ['ui.router']). if (!UserService.hasVerifiedEmail()) { Materialize.toast("

Thanks for contributing! However, others won't see your card until you verify your email address

", 4000); } + }). error(function(error) { console.log('something went wrong pushing a card!'); @@ -209,4 +214,14 @@ angular.module('flashy.FeedController', ['ui.router']). $(document).off('keydown'); }); + $scope.shuffleCards = function() { + $timeout(function() { + (function(o) { + for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); + return o; + })($scope.cardCols[0]); + }); + }; + window.feedscope = $scope; + }); diff --git a/scripts/FlashcardDirective.js b/scripts/FlashcardDirective.js index 20687d6..70afe08 100644 --- a/scripts/FlashcardDirective.js +++ b/scripts/FlashcardDirective.js @@ -11,16 +11,6 @@ angular.module('flashy.FlashcardDirective', []). }, link: function(scope, element) { /* Handles width of the card */ - function refresh_width() { - avail = $window.innerWidth - 17; - width = Math.floor(avail / Math.floor(avail / 250) - 12); - element.children().css({ - width: width + 'px', - height: (width * 3 / 5) + 'px', - }); - }; - angular.element($window).bind('resize', refresh_width); - refresh_width(); scope.textPieces = []; scope.flashcard.mask.sort(function(a, b) { return a[0] - b[0]; diff --git a/styles/feed_animations.css b/styles/feed_animations.css new file mode 100644 index 0000000..d997cd7 --- /dev/null +++ b/styles/feed_animations.css @@ -0,0 +1,10 @@ +flashcard.ng-enter div, flashcard.ng-leave div, flashcard.ng-move div { + -webkit-transition: 1.5s linear all; + transition: 1.5s linear all; + background-color: red; } + +flashcard.ng-move div, flashcard.ng-leave.ng-leave-active div { + opacity: 0; } + +flashcard.ng-move.ng-move.active div, flashcard.ng-enter.ng-enter-active { + opacity: 1; } diff --git a/styles/flashier.css b/styles/flashier.css index 8aae859..0ebe7c1 100644 --- a/styles/flashier.css +++ b/styles/flashier.css @@ -7985,3 +7985,48 @@ button.picker__today:focus, button.picker__clear:focus, button.picker__close:foc .picker--time .picker__box { margin-bottom: 5em; } } + +.card-move { + position: relative; + top: 26px; } + +.card-move.card-move-active { + transition: all 0.5s ease; + top: 0; } + +.card-move + div { + /* cannot have transition on this element */ + /*transition: all 1s ease;*/ + position: relative; + top: -26px; } + +.card-move.card-move-active + div { + transition: all 0.5s ease; + position: relative; + top: 0; } + +.card-enter { + position: relative; + opacity: 0; + height: 0; + left: 100px; } + +.card-enter.card-enter-active { + transition: all 0.5s ease; + opacity: 1; + left: 0; + height: 26px; } + +.card-leave { + position: relative; + opacity: 1; + left: 0; + height: 26px; + z-index: -100; } + +.card-leave.card-leave-active { + transition: all 0.5s ease; + opacity: 0; + left: 100px; + height: 0; + top: -13px; } diff --git a/templates/feed.html b/templates/feed.html index dfa6d73..93d221e 100644 --- a/templates/feed.html +++ b/templates/feed.html @@ -11,9 +11,7 @@ -->

-
- -
+
-- 1.9.1