Skip to content

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

动画效果

上级 1a5b40c3
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 107 行增加 和 26 行删除
index.html
浏览文件 @ d94953a4
......@@ -11,6 +11,8 @@
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<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>
</head>
<body id="appBody">
......
src/components/annual-summary/card-1.vue
浏览文件 @ d94953a4
......@@ -3,7 +3,7 @@
<Logo></Logo>
<div class="bgi-wrapper"><img src="~@/images/annual/page-1-back.png" alt="" /></div>
<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 class="mt-15"><span class="cg2 b">2018</span> 年 <span class="cg2 b">12</span> 月 <span class="cg2 b"> 1 </span>日</p>
<p>第一次遇见您</p>
......@@ -17,8 +17,8 @@ import Logo from "@/components/annual-summary/logo";
export default {
components: {
Logo
},
}
}
};
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
......@@ -28,8 +28,8 @@ export default {
left: 0;
height: 100vh;
font-size: 16px;
color: #3B3B3B;
background: #F4FEF8;
color: #3b3b3b;
background: #f4fef8;
.bgi-wrapper {
position: absolute;
bottom: 0;
......@@ -51,18 +51,76 @@ export default {
line-height: 1;
font-size: 20px;
font-weight: 700;
color: #3F3F3F;
color: #3f3f3f;
span {
display: inline-block;
margin: 0 7px;
padding: 1px 25px;
border-bottom: 2px solid #3B3B3B;
color: #3B3B3B;
border-bottom: 2px solid #3b3b3b;
color: #3b3b3b;
opacity: 1;
}
}
p {
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>
\ No newline at end of file
src/main.js
浏览文件 @ d94953a4
......@@ -13,11 +13,9 @@ import Vant from 'vant';
import 'vant/lib/index.css';
import clipboard from 'clipboard';
import { querystring } from '@/utils';
// import VueAwesomeSwiper from 'vue-awesome-swiper'
// import 'swiper/css/swiper.css'
import 'swiper/swiper-bundle.css';
//注册到vue原型上
// Vue.use(VueAwesomeSwiper);
// import '@/utils/swiper.animate1.0.3.min'
// import '@/utils/animate.min'
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 {
return {
isWeb: window.__isWeb,
isInfresh: false,
showLoading: true,
showLoading: false
};
},
......@@ -88,8 +88,22 @@ export default {
new Swiper(".swiper-container", {
direction: "vertical",
speed: 300,
slidesPerView: 1
// slidesPerGroup : 5,
slidesPerView: 1,
// 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 {
</script>
<style lang="less" scoped>
.as-swipper-wrapper {
transform: translate3d(0, 0, 0);
// background: red;
.swiper-container {
transform: translate3d(0, 0, 0);
overflow: hidden;
}
.swiper-slide {
transform: translate3d(0, 0, 0);
}
}
// .as-swipper-wrapper {
// transform: translate3d(0, 0, 0);
// // background: red;
// .swiper-container {
// transform: translate3d(0, 0, 0);
// overflow: hidden;
// }
// .swiper-slide {
// transform: translate3d(0, 0, 0);
// }
// }
.swiper-container {
height: 100vh;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或