title: CSS Mask Transition for Vuejs
body: <p>I have been trying to recreate this mask css effect as router-view transition.</p>
  
  <p><a href="https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/" rel="nofollow noreferrer">https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/</a></p>
  
  <p>And I tried to map the sample code to Vuejs transition states.  But I am not getting any animation effect as if the mask-play never happened or it happens too quickly that I didn't see anything.  I am not sure if this is doable but I did create a Vue page where the effect works, just not during route transition.</p>
  
  <p>Any help is greatly appreciated.  Thank you.</p>
  
  <p>App.vue  (Below code not working as router-view transition)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id="app"&gt;
     
        &lt;transition :name="transitionName" mode="in-out" &gt;
          &lt;router-view class="view child-view"
                       keep-alive&gt;&lt;/router-view&gt;
        &lt;/transition&gt;
     
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
    
    export default {
      name: 'app',
      methods: {     
      },
      watch: {
        '$route'(to, from) { 
            this.transitionName = 'mask-nature1';
        },
      },
      data() {
        return {
          
        };
      },
    };
  &lt;/script&gt;
  
  &lt;style&gt;
   
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .child-view {
      position: absolute;
     
    }
    @-webkit-keyframes mask-play {
    from {
      -webkit-mask-position: 0% 0;
              mask-position: 0% 0;
    }
    to {
      -webkit-mask-position: 100% 0;
              mask-position: 100% 0;
    }
  }
  
  @keyframes mask-play {
    from {
      -webkit-mask-position: 0% 0;
              mask-position: 0% 0;
    }
    to {
      -webkit-mask-position: 100% 0;
              mask-position: 100% 0;
    }
  }
  
  .mask-nature1-enter{
    z-index: 20;
  }
  
  .mask-nature1-enter-to{
    /* current page */
    z-index: 30;
  }
  
  .mask-nature1-leave{
    -webkit-mask: url('../images/mask/nature-sprite.png');
            mask: url('../images/mask/nature-sprite.png');
    -webkit-mask-size: 2300% 100%;
            mask-size: 2300% 100%;
    -webkit-animation: mask-play 5.4s steps(22) forwards;
            animation: mask-play 5.4s steps(22) forwards;
  }
  .mask-nature1-enter-active{
    z-index: 20;
  }
  
  
  
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>With that being an attempt to apply this effect for router-view.  I have created this Vue page where the css effect works during page load where I simply put two div on top of one another and apply the css to the top one.</p>
  
  <p>(Below code works as CSS transition for two div on top of each other)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="content-wrapper"&gt;
      &lt;div class="css-mask" style='postion:absolute; background-image: url(./static/images/background1.jpg); z-index: 30'&gt;&lt;/div&gt;
      &lt;div class="top-left" style='postion:absolute; background-image: url(./static/images/background2.jpg);  z-index: 20'&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      components: {
      },
      mounted() {
      },
      beforeRouteEnter(to, from, next) {
      },
      data() {
      },
    };
  
  &lt;/script&gt;
  
  &lt;style lang="css" rel="stylesheet/css" scoped&gt;
    /*@import "./resources/assets/sass/variables";*/
  
    .css-mask{
      -webkit-mask: url('../../static/images/mask/nature-sprite.png');
              mask: url('../../static/images/mask/nature-sprite.png');
      -webkit-mask-size: 2300% 100%;
              mask-size: 2300% 100%;
      -webkit-animation: mask-play 5.4s steps(22) forwards;
              animation: mask-play 5.4s steps(22) forwards;
      /*-webkit-animation: mask-play 1.4s steps(22) forwards;*/
      /*animation: mask-play 1.4s steps(22) forwards;*/
    }
  
    @-webkit-keyframes mask-play {
      from {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
      }
      to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
      }
    }
  
    @keyframes mask-play {
      from {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
      }
      to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
      }
    }
  
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>