Skip to content

P
pica-professional-exam
提交 d94953a4 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

动画效果

上级 1a5b40c3
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 107 行增加 和 26 行删除
index.html
浏览文件 @ d94953a4
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" /> <meta http-equiv="Expires" content="0" />
<script src='http://192.168.31.113:8081/src/assets/swiper.animate1.0.3.min.js'></script>
<link rel="stylesheet" href="http://192.168.31.113:8081/src/assets/animate.min.css">
<title>云鹊·医</title> <title>云鹊·医</title>
</head> </head>
<body id="appBody"> <body id="appBody">
......
src/components/annual-summary/card-1.vue
浏览文件 @ d94953a4
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<Logo></Logo> <Logo></Logo>
<div class="bgi-wrapper"><img src="~@/images/annual/page-1-back.png" alt="" /></div> <div class="bgi-wrapper"><img src="~@/images/annual/page-1-back.png" alt="" /></div>
<section class="detail"> <section class="detail">
<p class="title">尊敬的<span>齐天大圣</span>医生</p> <p class="title">尊敬的<span class="shareanimate" swiper-animate-effect="shareanimate" swiper-animate-duration="4s" swiper-animate-delay="0s">齐天大圣</span>医生</p>
<p style="line-height: 2;">我们在一起已经<span class="fbig6 cg2">100</span>天啦</p> <p style="line-height: 2;">我们在一起已经<span class="fbig6 cg2">100</span>天啦</p>
<p class="mt-15"><span class="cg2 b">2018</span> 年 <span class="cg2 b">12</span> 月 <span class="cg2 b"> 1 </span>日</p> <p class="mt-15"><span class="cg2 b">2018</span> 年 <span class="cg2 b">12</span> 月 <span class="cg2 b"> 1 </span>日</p>
<p>第一次遇见您</p> <p>第一次遇见您</p>
...@@ -17,8 +17,8 @@ import Logo from "@/components/annual-summary/logo"; ...@@ -17,8 +17,8 @@ import Logo from "@/components/annual-summary/logo";
export default { export default {
components: { components: {
Logo Logo
}, }
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import "../../style/as-common.less"; @import "../../style/as-common.less";
...@@ -28,8 +28,8 @@ export default { ...@@ -28,8 +28,8 @@ export default {
left: 0; left: 0;
height: 100vh; height: 100vh;
font-size: 16px; font-size: 16px;
color: #3B3B3B; color: #3b3b3b;
background: #F4FEF8; background: #f4fef8;
.bgi-wrapper { .bgi-wrapper {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -51,18 +51,76 @@ export default { ...@@ -51,18 +51,76 @@ export default {
line-height: 1; line-height: 1;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: #3F3F3F; color: #3f3f3f;
span { span {
display: inline-block; display: inline-block;
margin: 0 7px; margin: 0 7px;
padding: 1px 25px; padding: 1px 25px;
border-bottom: 2px solid #3B3B3B; border-bottom: 2px solid #3b3b3b;
color: #3B3B3B; color: #3b3b3b;
opacity: 1;
} }
} }
p { p {
line-height: 1.8; line-height: 1.8;
} }
} }
.shareanimate {
animation: shareani 4s ease;
-webkit-animation: shareani 4s ease;
-moz-animation: shareani 4s ease;
-ms-animation: shareani 4s ease;
}
@keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.1;
}
100% {
left: 85%;
top: 0;
opacity: 1;
}
}
@-webkit-keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.8;
}
100% {
left: 85%;
top: 0;
opacity: 0;
}
}
@-moz-keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.8;
}
100% {
left: 85%;
top: 0;
opacity: 0;
}
}
@-ms-keyframes shareani {
0% {
left: 50%;
top: 74%;
opacity: 0.8;
}
100% {
left: 85%;
top: 0;
opacity: 0;
}
}
} }
</style> </style>
\ No newline at end of file
src/main.js
浏览文件 @ d94953a4
...@@ -13,11 +13,9 @@ import Vant from 'vant'; ...@@ -13,11 +13,9 @@ import Vant from 'vant';
import 'vant/lib/index.css'; import 'vant/lib/index.css';
import clipboard from 'clipboard'; import clipboard from 'clipboard';
import { querystring } from '@/utils'; import { querystring } from '@/utils';
// import VueAwesomeSwiper from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
import 'swiper/swiper-bundle.css'; import 'swiper/swiper-bundle.css';
//注册到vue原型上 // import '@/utils/swiper.animate1.0.3.min'
// Vue.use(VueAwesomeSwiper); // import '@/utils/animate.min'
Vue.prototype.clipboard = clipboard; Vue.prototype.clipboard = clipboard;
......
src/utils/animate.min.css 0 → 100755
浏览文件 @ d94953a4
此差异已折叠。
src/utils/swiper.animate1.0.3.min.js 0 → 100755
浏览文件 @ d94953a4
//本插件由www.swiper.com.cn提供
//版本1.03
function swiperAnimateCache(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["style"]?allBoxes[i].setAttribute("swiper-animate-style-cache",allBoxes[i].attributes["style"].value):allBoxes[i].setAttribute("swiper-animate-style-cache"," "),allBoxes[i].style.visibility="hidden"}function swiperAnimate(a){clearSwiperAnimate(a);var b=a.slides[a.activeIndex].querySelectorAll(".ani");for(i=0;i<b.length;i++)b[i].style.visibility="visible",effect=b[i].attributes["swiper-animate-effect"]?b[i].attributes["swiper-animate-effect"].value:"",b[i].className=b[i].className+" "+effect+" "+"animated",style=b[i].attributes["style"].value,duration=b[i].attributes["swiper-animate-duration"]?b[i].attributes["swiper-animate-duration"].value:"",duration&&(style=style+"animation-duration:"+duration+";-webkit-animation-duration:"+duration+";"),delay=b[i].attributes["swiper-animate-delay"]?b[i].attributes["swiper-animate-delay"].value:"",delay&&(style=style+"animation-delay:"+delay+";-webkit-animation-delay:"+delay+";"),b[i].setAttribute("style",style)}function clearSwiperAnimate(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["swiper-animate-style-cache"]&&allBoxes[i].setAttribute("style",allBoxes[i].attributes["swiper-animate-style-cache"].value),allBoxes[i].style.visibility="hidden",allBoxes[i].className=allBoxes[i].className.replace("animated"," "),allBoxes[i].attributes["swiper-animate-effect"]&&(effect=allBoxes[i].attributes["swiper-animate-effect"].value,allBoxes[i].className=allBoxes[i].className.replace(effect," "))}
\ No newline at end of file
src/views/annual-summary/detail.vue
浏览文件 @ d94953a4
...@@ -54,7 +54,7 @@ export default { ...@@ -54,7 +54,7 @@ export default {
return { return {
isWeb: window.__isWeb, isWeb: window.__isWeb,
isInfresh: false, isInfresh: false,
showLoading: true, showLoading: false
}; };
}, },
...@@ -88,8 +88,22 @@ export default { ...@@ -88,8 +88,22 @@ export default {
new Swiper(".swiper-container", { new Swiper(".swiper-container", {
direction: "vertical", direction: "vertical",
speed: 300, speed: 300,
slidesPerView: 1 slidesPerView: 1,
// slidesPerGroup : 5, // observer: true, //修改swiper自己或子元素时，自动初始化swiper
// observeParents: true //修改swiper的父元素时，自动初始化swiper
// // slidesPerGroup : 5,
on: {
init: function() {
swiperAnimateCache(this);
swiperAnimate(this);
},
slideChangeTransitionEnd: function() {
swiperAnimate(this);
if (this.activeIndex == 8) {
$("#share").addClass("shareanimate");
}
}
}
}); });
}, },
...@@ -143,17 +157,17 @@ export default { ...@@ -143,17 +157,17 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.as-swipper-wrapper { // .as-swipper-wrapper {
transform: translate3d(0, 0, 0); // transform: translate3d(0, 0, 0);
// background: red; // // background: red;
.swiper-container { // .swiper-container {
transform: translate3d(0, 0, 0); // transform: translate3d(0, 0, 0);
overflow: hidden; // overflow: hidden;
} // }
.swiper-slide { // .swiper-slide {
transform: translate3d(0, 0, 0); // transform: translate3d(0, 0, 0);
} // }
} // }
.swiper-container { .swiper-container {
height: 100vh; height: 100vh;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或