0
私はこのマスクCSS効果をルータビュー遷移として再作成しようとしています。CSS Mask Transition for Vuejs
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>。私はページの読み込み中にCSSエフェクトが動作するこのVueページを作成しました。ここでは、2つのdivを上に置き、先頭のCSSにCSSを適用します。
（コードの下には、互いの上部にある2つの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>
はい、私は.mask-nature1-leave-activeのみを定義して動作させました。ありがとう。 – Alocus