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를 맨 위에 적용합니다.

(코드 아래 서로의 상단에 두 개의 사업부에 대한 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>

난 당신이 키 프레임에 mask-nature1을 연결할 필요가 있다고 생각

Answer 1

,

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