element loading transitions

TODO.md

@@ -1,6 +1,4 @@
 ## General
-* loading transitions
-  - also transitioning elements in when page loads (especially gallery thumbs in gallery)
 * image urls, page links, social nav items, etc -> put in store or whatever
 * facebook/twitter social card thingies
 * favicon

components/ContentPage.vue

@@ -1,7 +1,9 @@
 <template>
-  <article class="content-page">
+  <article class="content-page"
+           :class="{ 'is-mounted': isMounted }"
+  >
     <h1 v-if="heading !== ''" class="page-heading page-title">{{ heading }}</h1>
-    <section class="content-container">
+    <section class="content-container load-transition">
       <div v-if="$slots.default" class="content">
         <slot></slot>
       </div>
@@ -24,12 +26,15 @@ export default {
 
   data () {
     return {
+      isMounted: false,
     }
   },
 
-  methods: {
-  }
-
+  mounted () {
+    this.$nextTick(() => {
+      this.isMounted = true
+    })
+  },
 }
 </script>
 
@@ -111,4 +116,13 @@ $z-index-top: 10;
     opacity: 1;
   }
 }
+
+.load-transition {
+  transition: 2s 2s;
+  opacity: 0;
+
+  @at-root .is-mounted & {
+    opacity: 1;
+  }
+}
 </style>

components/GalleryPage.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="gallery-page">
+  <div class="gallery-page"
+       :class="{'is-mounted': isMounted }"
+  >
     <GalleryImageViewer class="image-viewer"
                         ref="imageViewer"
                         :is-visible="imageViewerIsVisible"
@@ -11,11 +13,11 @@
                         @close="imageViewerIsVisible = false" />
     <article class="gallery">
       <h1 class="page-heading page-title">My Galleries</h1>
-      <GalleryFeatured class="gallery__featured"
+      <GalleryFeatured class="gallery__featured load-transition load-transition--1"
                        :galleries="galleries"
                        :gallery-active="activeGalleryIndex"
                        @clicked="handleFeaturedClick" />
-      <GalleryThumbs class="gallery__thumbs"
+      <GalleryThumbs class="gallery__thumbs load-transition load-transition--2"
                      :featured-height="featuredImageHeight"
                      :galleries="galleries"
                      :active-row="activeRow"
@@ -47,6 +49,7 @@ export default {
 
   data () {
     return {
+      isMounted: false,
       featuredImageHeight: '16rem',
       imageViewerIsVisible: false,
       activeRow: 0,
@@ -100,6 +103,9 @@ export default {
 
   mounted () {
     window.addEventListener('resize', () => { this.imageViewerIsVisible = false })
+    this.$nextTick(() => {
+      this.isMounted = true
+    })
   },
 
   methods: {
@@ -252,4 +258,21 @@ export default {
 
 }
 
+.load-transition {
+  transition: opacity 2s;
+  opacity: 0;
+
+  &--1 {
+    transition-delay: 2s;
+  }
+
+  &--2 {
+    transition-delay: 3s;
+  }
+
+  @at-root .is-mounted & {
+    opacity: 1;
+  }
+}
+
 </style>

components/SiteMenu.vue

@@ -1,5 +1,7 @@
 <template>
-  <section :class="{ 'is-open': isOpen }"
+  <section :class="{ 'is-open': isOpen,
+                     'is-mounted': isMounted
+           }"
            class="menu-drawer menu-layout"
   >
     <div class="menu-header__item menu-toggle"
@@ -79,6 +81,7 @@ export default {
 
   data () {
     return {
+      isMounted: false, //component has loaded
       loadMenuImages: true,
       siteNav: [
         { 'to': '/', 'text': 'Home', bgImgUrl: '/img/devices--bw.jpg'},
@@ -99,6 +102,9 @@ export default {
   mounted () {
     const mq = window.matchMedia("(min-width: 40em)")
     this.loadMenuImages = mq.matches
+    this.$nextTick(() => {
+      this.isMounted = true
+    })
   },
 }
 </script>
@@ -266,7 +272,13 @@ $transition-timing: .5s;
   font-size: 0.9rem;
   text-transform: uppercase;
   line-height: 1.1;
+
+  transition: opacity 2s 1s;
+  opacity: 0;
+
+  @at-root .is-mounted & {
     opacity: .8;
+  }
 
   @include font-title($weight: 400);