Vuejs的CSS掩码转换

Question

我一直试图重新创建这个掩码css效果作为路由器视图转换。

https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/

我试图将示例代码映射到Vuejs过渡状态。但我没有得到任何动画效果，就好像面具游戏从来没有发生过，或者它发生得太快，以至于我什么都没看到。我不确定这是否可行，但我确实创建了一个Vue页面，其中效果工作，只是没有在路由过渡。

任何帮助都是非常感谢的。谢谢。

App.vue (以下代码不作为路由器视图转换)

​

<template>
  <div id="app">
   
      <transition :name="transitionName" mode="in-out" >
        <router-view class="view child-view"
                     keep-alive></router-view>
      </transition>
   
  </div>
</template>


<script>
  
  export default {
    name: 'app',
    methods: {     
    },
    watch: {
      '$route'(to, from) { 
          this.transitionName = 'mask-nature1';
      },
    },
    data() {
      return {
        
      };
    },
  };
</script>

<style>
 
  #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;
}



</style>

​

在此情况下，尝试将此效果应用于路由器视图。我已经创建了这个Vue页面，css效果在页面加载期间工作，我只需将两个div放在另一个页面上，并将css应用到顶部。

(下面的代码作为两个div相互之间的CSS转换)

​

<template>
  <div class="content-wrapper">
    <div class="css-mask" style='postion:absolute; background-image: url(./static/images/background1.jpg); z-index: 30'></div>
    <div class="top-left" style='postion:absolute; background-image: url(./static/images/background2.jpg);  z-index: 20'></div>
  </div>
</template>

<script>
  export default {
    components: {
    },
    mounted() {
    },
    beforeRouteEnter(to, from, next) {
    },
    data() {
    },
  };

</script>

<style lang="css" rel="stylesheet/css" scoped>
  /*@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;
    }
  }

</style>

​

Answer 1

我觉得你需要把mask-nature1链接到关键帧，

.mask-nature1-enter-active {
  animation: mask-play 500ms ease-out forwards;
}
.mask-nature1-leave-active {
  animation: mask-play 500ms ease-out forwards;
}