Skip to content

visualcloud / Vmatrix-template

Go to a project
Commit a0a4ac17 by hank
Options

修改滤镜

parent 325dd0d0
Showing with 91 additions and 46 deletions
src/templates/companyCulture/index.vue
...@@ -100,22 +100,11 @@ export default { ...@@ -100,22 +100,11 @@ export default {
beforeDestroy() {}, beforeDestroy() {},
mounted() { mounted() {
Scene.EventBus.on("enterAfter", e => { Scene.EventBus.on("enterAfter", e => {
console.log(e, "enterAfter"); console.log(e, "enterAfter", this.$refs.child[0].$options.entering);
if (this.sliderActiveIndex == e.page) { if (this.sliderActiveIndex == e.page) {
var aa = setTimeout( var aa = setTimeout(
() => { () => {
this.$refs.child[0].leave(); this.$refs.child[0].leave();
setTimeout(() => {
var index = this.sliderActiveIndex;
console.log(this.sliderActiveIndex + 1 >= this.pages.length);
if (this.sliderActiveIndex + 1 >= this.pages.length) {
index = -1;
}
console.log(index);
this.swiper.slideTo(index + 1, 1000, false);
clearTimeout(aa)
}, 1500);
}, },
e.nextDuration ? e.nextDuration : 1000 e.nextDuration ? e.nextDuration : 1000
); );
...@@ -213,11 +202,11 @@ export default { ...@@ -213,11 +202,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.glob-container { .glob-container {
background-color: red;
// filter: url("#goo");
} }
</style> </style>
<style> <style>
.swiper-slide { .swiper-slide {
/* width: 100% !important; */ /* width: 100% !important; */
} }
......
src/templates/companyCulture/pages/welcome.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
swiper-animate-duration="1s" swiper-animate-duration="1s"
swiper-animate-delay="0.5s" swiper-animate-delay="0.5s"
>{{getValue('welcomeWordEn')}}</div> >{{getValue('welcomeWordEn')}}</div>
<div <div ref="def"
class="ani right-word" class="ani right-word"
swiper-animate-effect="fadeInleft" swiper-animate-effect="fadeInleft"
swiper-animate-duration="1s" swiper-animate-duration="1s"
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
swiper-animate-duration="1s" swiper-animate-duration="1s"
swiper-animate-delay="1s" swiper-animate-delay="1s"
> >
<div class="left-word">{{getValue('welcomeWordZh')}}</div> <div ref="abc" class="left-word">{{getValue('welcomeWordZh')}}</div>
<!-- <div class="right-word">{{getValue('welcomeWordZh').slice(10,20)}}</div> --> <!-- <div class="right-word">{{getValue('welcomeWordZh').slice(10,20)}}</div> -->
</div> </div>
<div class="time-info"> <div class="time-info">
...@@ -72,6 +72,20 @@ export default { ...@@ -72,6 +72,20 @@ export default {
}, countEnterTime); }, countEnterTime);
}); });
}, },
entering() {
$.velocity(this.$refs['abc'],)
return new promise();
},
innerAnimationStart() {
sence.eventBus.emit('pageDone')
},
innerAnimationEnd(){
},
leave(){
},
destroyed() { destroyed() {
clearTimeout(this.timer) clearTimeout(this.timer)
}, },
......
src/templates/listingInformation/index.vue
<template> <template>
<swiper <div class>
:options="swiperOption" <swiper
:class="'glob-container'" :options="swiperOption"
ref="mySwiper" :class="'glob-container'"
@someSwiperEvent="callback" ref="mySwiper"
style="width:1920px;height:1080px;" @someSwiperEvent="callback"
> style="width:1920px;height:1080px;"
<swiper-slide
style="transform: translate3d(0,0,0)"
class="ani"
v-for="(page, index) in pages"
:key="index"
> >
<component <swiper-slide
:is="page.component" style="transform: translate3d(0,0,0)"
:schemaData="pages[index].schemaData" class="ani"
:isEditMode="isEditMode" v-for="(page, index) in pages"
:cancelEdit.sync="cancelEdit" :key="index"
:page="index" >
:activeIndex="sliderActiveIndex" <component
></component> :is="page.component"
</swiper-slide> :schemaData="pages[index].schemaData"
<!-- <swiper-slide> :isEditMode="isEditMode"
<div class="container">I'm Slide 2</div> :cancelEdit.sync="cancelEdit"
</swiper-slide> :page="index"
<swiper-slide> :activeIndex="sliderActiveIndex"
<div class="container">I'm Slide 3</div> ></component>
</swiper-slide>--> </swiper-slide>
</swiper> </swiper>
<svg viewBox="0 0 1920 1080" class="svg-filters">
<title>Animated clip-path SVG</title>
<defs>
<filter id="cd-image-1">
<clipPath id="cd-image-12">
<circle id="cd-circle-1" cx="110" cy="400" r="60" />
</clipPath>
</filter>
</defs>
<!-- <image
height="800px"
width="1400px"
clip-path="url(#cd-image-1)"
xlink:href="http://ue.qzone.qq.com/janilydemo/mask/clippath/img.jpg"
/>-->
</svg>
</div>
</template> </template>
<script> <script>
...@@ -89,7 +102,11 @@ export default { ...@@ -89,7 +102,11 @@ export default {
} }
}, },
beforeDestroy() {}, beforeDestroy() {},
mounted() {}, mounted() {
$(".glob-container").click(function() {
$(this).toggleClass("visible");
});
},
created() { created() {
var vm = this; var vm = this;
Message.init(e => { Message.init(e => {
...@@ -180,8 +197,33 @@ export default { ...@@ -180,8 +197,33 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.glob-container { .glob-container {
background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg") center no-repeat; background: url("http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg")
center no-repeat;
background-size: 100%; background-size: 100%;
clip: rect(0 0 0 0);
filter: url("#cd-image-12");
-webkit-filter: url("#cd-image-12");
.svg-filters {
position: absolute;
clip: rect(0 0 0 0);
}
#cd-image-1 circle {
animation: visible-clippath 1s ease-in-out forwards;
opacity: 0;
}
}
.svg-filters {
position: absolute;
clip: rect(0 0 0 0);
}
#cd-image-1 circle {
animation: visible-clippath 1s ease-in-out forwards;
opacity: 0;
}
@keyframes visible-clippath {
to {
r: 1364;
}
} }
</style> </style>
<style> <style>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment