Vuejs 的 CSS 掩码转换

Question

我一直在尝试将此 mask css 效果重新创建为路由器 View 转换。

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

我尝试将示例代码映射到 Vuejs 转换状态。但是我没有得到任何动画效果，就好像面具播放从未发生过或者发生得太快以至于我什么都没看到。我不确定这是否可行，但我确实创建了一个效果有效的 Vue 页面，只是不在路由转换期间。

非常感谢任何帮助。谢谢。

App.vue(下面的代码不能作为路由 View 转换)

<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>

尝试将此效果应用于路由器 View 。我创建了这个 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;
}