Archive for January, 2014

Foundation 5 Framework Animate Accordion (multiple, with dynamic AJAX content using reflow, and also nested)

Monday, January 27th, 2014

Out of the box there is no animation on these.  I tried for a CSS3 transition but couldn’t get one. If anyone finds one do tell. Anyhow, my current project has 3 accordion levels, the main off-canvas accordion, a second one loaded dynamically via AJAX into the main content area, and third level of accordions nested in each of the 2nd level accordions.

First, I gave them each an id, so that I could address them easily and individually:

<dl class=”accordion firstLevelAccordions” data-accordion> (in the ‘off-canvas’ left)

<dl class=’accordion secondLevelAccordions’ data-accordion> (in the main content right section, content thereof loaded dynamically via AJAX)

<dl class=’accordion thirdLevelAccordions’ data-accordion> (this one nested inside the secondLevelAccordions)

After the dynamic content load, Foundation makes you reflow to find/activate the new content:

$(document).foundation(‘reflow’);

The initialization of each accordion (you could merge these into one function, or parameter-ize the class piece, but for simplicity’s sake, this works just fine):

$(function(){ // onready

// first level off-canvas menu accordions
$(document).on(“click”, “.firstLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.firstLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.firstLevelAccordions > dd.active > a”, function (event) {
$(“.firstLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

// second level article list/detail accordions
$(document).on(“click”, “.secondLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.secondLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.secondLevelAccordions > dd.active > a”, function (event) {
$(“.secondLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

// third level nested accordions
$(document).on(“click”, “.thirdLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.thirdLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().addClass(‘active’).children(“.content”).slideToggle(1000);
})

$(document).on(“click”, “.thirdLevelAccordions > dd.active > a”, function (event) {
$(“.thirdLevelAccordions > dd.active”).removeClass(‘active’).children(“.content”).slideUp(1000);
$(this).parent().removeClass(‘active’);//.find(“.content”).slideToggle(“fast”);
})

});

Angularjs switching ngview view-container animation direction – left, then right – using view-frames and keyframes and rootScope

Sunday, January 26th, 2014

index.html:

<div class=”view-container” id=”view-containerWrapper”>
<div class=”{{rootAnimation}}” ng-view></div>
</div>

_animate.scss:

.view-container {
/* position: relative;*/
}
/* Index loads w/o animation */
.view-frame-0.ng-enter {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.view-frame-0.ng-leave {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* Page 2 animated in from the right, index animates out to the left */
.view-frame-1.ng-enter {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;

-webkit-animation: 1.0s slide2;
-moz-animation: 1.0s slide2;
-o-animation: 1.0s slide2;
animation: 1.0s slide2;
z-index: 100;
}

.view-frame-1.ng-leave {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
width:100%;

-webkit-animation: 1.0s slide0;
-moz-animation: 1.0s slide0;
-o-animation: 1.0s slide0;
animation: 1.0s slide0;
z-index: 100;
}
/* Page 2 animates out to the right, index animates back from the left */
.view-frame-2.ng-enter {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
width:100%;

-webkit-animation: 1.0s slide3;
-moz-animation: 1.0s slide3;
-o-animation: 1.0s slide3;
animation: 1.0s slide3;
z-index: 100;
}

.view-frame-2.ng-leave {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;

-webkit-animation: 1.0s slide1;
-moz-animation: 1.0s slide1;
-o-animation: 1.0s slide1;
animation: 1.0s slide1;
z-index: 100;
}

/* Slide 0 – From active to the left */
@keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}
@-moz-keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

@-webkit-keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

@keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

@-moz-keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

@-webkit-keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

/* slide 1 – from active to the right */

@keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}
@-moz-keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

@-webkit-keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

@keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

@-moz-keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

@-webkit-keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

/* slide 2 – from the right to active */

@keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}
@-moz-keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-webkit-keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-moz-keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-webkit-keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

/* slide 3 – from the left to active */

@keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}
@-moz-keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-webkit-keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-moz-keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-webkit-keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

products.html:

<div ng-repeat-start=”prod in products” headersloaded class=”followMeBar”>
<i class=”iseFontIcons icon-{{prod.icon}}”></i>
{{ prod.Name | uppercase }}
</div>

<ul class=”nav nav-tabs nav-stacked” ng-repeat-end>
<li ng-repeat=”cat in prod.Categories” productsloaded>
<a href=” ng-click=’go(“product_{{prod.ID}}/category_{{cat.ID}}”,”view-frame-1″)’>{{cat.Name}}</a>
</li>
</ul>

finally, in the controller…that go method:

$scope.go = function(path,newAnimation) {
$rootScope.rootAnimation = newAnimation;
$location.path(path);
}

 can’t remember if this ends up mattering, if so just for the sake of it, the important wrappers from _main.scss:

#mainWrap{
position:relative;
}
.ng-view{
position:relative;
}
#headerBar{

width:100%;
}
.view-container{
width:100%;
position: relative;
}
#view-containerWrapper{
position:relative;
}
.viewsWrapper{
border-right: 1px solid #f1f1f1;
border-left: 1px solid #f1f1f1;
width:100%;
position:absolute;
}
#productsWrapper{
top:0px;
z-index:0;
}