更改为css动画，优化图片显示

App.vue

@@ -2,7 +2,6 @@
 	export default {
 		onLaunch: function() {
 			console.log('App Launch')
-			// uni.iCommon.getFontFamily()
 		},
 		onShow: function() {
 			console.log('App Show')
@@ -16,5 +15,6 @@
 <style>
 	/*每个页面公共css */
 	@import "./custom/custom.scss";
-	@import "./custom/animation.scss"
+	@import "./custom/animation.scss";
+	/* @import url(""); */
 </style>

components/homeDetails/homeDetails.vue

@@ -1,18 +1,18 @@
 <template>
 	<view v-show="isShow" class="i-h-p100">
-		<scroll-view scroll-y="true" class="i-h-p100" :scroll-top="scrollTop">
-			<uni-transition ref="homeDetails" :show="isShow">
+		<scroll-view scroll-y="true" class="i-h-v100" :scroll-top="scrollTop">
+			<view class="animate__animated" :class="pageStatus===1?'animate__fadeInUp':pageStatus===3?'animate__fadeOutDown':''">
 				<view class="i-h-400"></view>
 				<view class="i-h-p100 i-flex i-al-center i-jst-center ">
 					<view class="i-w-p80">
 						<view class="i-w-p100">
-							<image class="i-w-p100 i-radius-20" mode="widthFix" ref="longImage" :src="itemInfo.img">
+							<image class="i-w-p100 i-radius-20" :style="'height:'+imageHeight+'px'" mode="widthFix" ref="longImage" :src="itemInfo.img" @load="onImageLoad">
 							</image>
 						</view>
 					</view>
 				</view>
 				<view class="i-h-200"></view>
-			</uni-transition>
+			</view>
 		</scroll-view>
 	</view>
 </template>
@@ -22,7 +22,8 @@
 		name: "homeDetails",
 		data() {
 			return {
-				scrollTop: 0
+				scrollTop: 0,
+				imageHeight:0
 			};
 		},
 		props: {
@@ -41,10 +42,6 @@
 			},
 		},
 		watch: {
-			// 监听显示状态，控制动画
-			pageStatus(newVal) {
-				this.startAnimation(1);
-			},
 			isShow(newVal) {
 				if (newVal) {
 					// 强制重置滚动位置
@@ -59,15 +56,9 @@
 			}
 		},
 		methods: {
-			startAnimation(status) {
-				this.$refs.homeDetails.step({
-					translateY: '80%',
-					opacity: 1
-				}, {
-					duration: 1500,
-					timingFunction: 'ease',
-				})
-				this.$refs.homeDetails.run(() => {})
+			// 图片加载时重设image高度
+			onImageLoad(event){
+				this.imageHeight = event.detail.height;
 			}
 		},
 	};

components/homeList/homeList.vue

@@ -1,44 +1,43 @@
 <template>
-	<view v-show="isShow">
-		<uni-transition ref="homeList" :show="isShow"
-			class="i-h-p100 i-w-v100 i-h-v100 i-flex i-al-center i-jst-center">
-			<view class="i-w-p100 i-h-p100">
-				<!-- 学校信息 -->
-				<view class="i-w-v100 i-h-p35 i-z-index1 i-flex i-al-center i-jst-center">
-					<view class="i-pst-r i-t-center i-c-fff">
-						<view class="" @click="developConfig()">
-							<span class="i-fs-70 custom-text">金东方国际高中电子宣传</span>
-						</view>
-						<view class="i-mt-26">
-							<span class="i-fs-30 ">学校slogan</span>
-						</view>
+	<view v-show="isShow" class="i-h-p100 i-w-v100 i-h-v100 i-flex i-al-center i-jst-center ">
+		<view class="i-w-p100 i-h-p100">
+			<!-- 学校信息 -->
+			<view class="i-w-v100 i-h-p35 i-z-index1 i-flex i-al-center i-jst-center">
+				<view class="i-pst-r i-t-center i-c-fff animate__animated" 
+				:class="pageStatus===1?'animate__fadeInDown':pageStatus===3?'animate__fadeOutUp':''">
+					<view class="" @click="developConfig()">
+						<span class="i-fs-70 custom-text">金东方国际高中电子宣传</span>
+					</view>
+					<view class="i-mt-26">
+						<span class="i-fs-30 ">学校slogan2</span>
 					</view>
 				</view>
-				<view class="i-w-p100 i-h-p60 i-z-index1">
-					<view class="i-flex i-jst-space-between i-wrap i-w-p80 i-h-p100 i-m-0auto">
-						<uni-row class="i-w-p100">
-							<uni-col :span="8" v-for="(item, index) in list" :key="index" class="i-flex i-al-center i-jst-center">
-								<view class="i-w-p70" :class="index>2?'i-mt-64':''">
-									<view class="i-pst-r i-w-p100" @click="onClick(item)">
-										<image class="i-radius-20 i-w-p100" mode="widthFix"
-											:src="item.type_img">
-										</image>
-										<view class="i-c-fff i-z-index1 i-pst-a i-t-center i-w-p100 i-t-p35">
-											<view>
-												<span class="i-fs-26">{{item.title}}</span>
-											</view>
-											<view class="i-mt-10">
-												<span class="i-fs-20">{{item.subtitle}}</span>
-											</view>
+			</view>
+			<view class="i-w-p100 i-h-p60 i-z-index1">
+				<view class="i-flex i-jst-space-between i-wrap i-w-p80 i-h-p100 i-m-0auto">
+					<uni-row class="i-w-p100 animate__animated" 
+					:class="pageStatus===1?'animate__fadeInUp':pageStatus===3?'animate__fadeOutDown':''">
+						<uni-col :span="8" v-for="(item, index) in list" :key="index"
+							class="i-flex i-al-center i-jst-center">
+							<view class="i-w-p70" :class="index>2?'i-mt-64':''">
+								<view class="i-pst-r i-w-p100" @click="onClick(item)">
+									<image class="i-radius-20 i-w-p100" mode="widthFix" :src="item.type_img">
+									</image>
+									<view class="i-c-fff i-z-index1 i-pst-a i-t-center i-w-p100 i-t-p35">
+										<view>
+											<span class="i-fs-26">{{item.title}}</span>
+										</view>
+										<view class="i-mt-10">
+											<span class="i-fs-20">{{item.subtitle}}</span>
 										</view>
 									</view>
 								</view>
-							</uni-col>
-						</uni-row>
-					</view>
+							</view>
+						</uni-col>
+					</uni-row>
 				</view>
 			</view>
-		</uni-transition>
+		</view>
 	</view>
 </template>
 
@@ -66,14 +65,7 @@
 				default: 2,
 			},
 		},
-		watch: {
-			// 监听显示状态，控制动画
-			pageStatus(newVal) {
-				if (newVal === 1) {
-					this.startAnimation(1); // 1表示进入动画
-				}
-			},
-		},
+		watch: {},
 		methods: {
 			// 清除缓存
 			developConfig() {
@@ -100,20 +92,10 @@
 					});
 				}
 			},
-			// 点击执行动画，动画完毕后给父组件传参
+			// 点击给父组件传参
 			onClick(e) {
-				this.startAnimation(e);
-			},
-			startAnimation(e) {
-				this.$refs.homeList.step({
-					opacity: 0
-				}, {
-					duration: 1000,
-					timingFunction: 'ease',
-				})
-				this.$refs.homeList.run(() => {})
 				this.$emit('customEvent', e)
-			}
+			},
 		}
 	}
 </script>

components/listModel/listModel.vue

@@ -3,14 +3,15 @@
 		<scroll-view ref="scrollView" scroll-y="true" :scroll-top="scrollTop" :show-scrollbar="false"
 			class="i-h-p100 i-w-p100">
 			<view class="i-flex i-al-center i-jst-center">
-				<uni-transition ref="ani" :show="isShow" mode-class="slide-bottom" class="i-w-p80 ">
+				<view class="i-w-p80 animate__animated"
+					:class="pageStatus===1?'animate__fadeInUp':pageStatus===3?'animate__fadeOutDown':''">
 					<view class="i-h-110"></view>
-					<uni-row class="">
+					<uni-row>
 						<uni-col :span="6" v-for="(item,index) in list" :key="index">
 							<view class="i-flex i-al-center i-jst-center i-mt-26">
 								<view class="i-pst-r i-h-p70 i-w-p90" @click="toDetail(item)">
-									<image class="i-radius-20 i-w-p100" :class="styleType == 1?'i-h-350':'i-h-250'" mode="aspectFill"
-										:src="item.detail_img">
+									<image class="i-radius-20 i-w-p100" :class="styleType === 1?'i-h-350':'i-h-250'"
+										mode="aspectFill" :src="item.detail_img">
 									</image>
 									<view class="i-c-fff i-z-index1 i-pst-a i-t-center i-w-p100 i-t-p35">
 										<view>
@@ -25,7 +26,7 @@
 						</uni-col>
 					</uni-row>
 					<view class="i-h-400"></view>
-				</uni-transition>
+				</view>
 			</view>
 		</scroll-view>
 	</view>
@@ -59,10 +60,6 @@
 			}
 		},
 		watch: {
-			// 监听显示状态，控制动画
-			async pageStatus(newVal) {
-				await this.startAnimation();
-			},
 			isShow(newVal) {
 				if (newVal) {
 					// 强制重置滚动位置
@@ -84,18 +81,6 @@
 
 				}
 			},
-			// 动画
-			startAnimation() {
-				this.$refs.ani.step({
-					translateY: '80%',
-					opacity: 1
-				}, {
-					duration: 1500,
-					timingFunction: 'ease',
-				})
-
-				this.$refs.ani.run(() => {})
-			}
 		}
 	}
 </script>

components/pageButton/pageButton.vue

@@ -1,16 +1,16 @@
 <template>
 	<view class="i-z-index3" v-show="isShow">
 		<!-- 头部 -->
-		<uni-transition ref="button01" style="z-index: 3;" :show="isShow" class="i-pst-f i-l-p11 i-t-p5">
+		<view class="i-pst-f i-l-p11 i-t-p5 i-z-index3 animate__animated" :class="pageStatus===1?'animate__fadeInLeft':pageStatus===3?'animate__fadeOutLeft':''">
 			<view class=" i-flex i-al-center" @click="gotoLast()">
 				<view class="i-radius-p50 i-bd-1">
 					<uni-icons type="back" size="1.6rem" color="#FFF"></uni-icons>
 				</view>
 				<span class="i-c-fff i-ml-10 i-fs-30">{{nowTitle}}</span>
 			</view>
-		</uni-transition>
+		</view>
 		<!-- 底部按钮 -->
-		<uni-transition :show="isShow" ref="button02" style="z-index: 3;" class="i-pst-f i-r-p21 i-b-p15">
+		<view class="i-pst-f i-r-p21 i-b-p15 i-z-index3 animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
 			<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
 				@click="gotoLast()">
 				<view class="i-radius-p50 i-bd-3">
@@ -18,8 +18,8 @@
 				</view>
 				<span class="i-c-000 i-ml-10 i-fs-26">返回上一级</span>
 			</view>
-		</uni-transition>
-		<uni-transition :show="isShow" ref="button03" style="z-index: 3;" class="i-pst-f i-r-p10 i-b-p15">
+		</view>
+		<view class="i-pst-f i-r-p10 i-b-p15 i-z-index3 animate__animated" :class="pageStatus===1?'animate__fadeInRight':pageStatus===3?'animate__fadeOutRight':''">
 			<view class=" i-flex i-al-center i-z-index3 i-bd-1 i-radius-40 i-plr-20 i-ptb-20 i-b-c-fff"
 				@click="gotoBack()">
 				<!-- <view class="i-radius-p50 i-bd-3 i-p-2"> -->
@@ -27,7 +27,7 @@
 				<!-- </view> -->
 				<span class="i-c-000 i-ml-10 i-fs-26">回到首页</span>
 			</view>
-		</uni-transition>
+		</view>
 	</view>
 </template>
 
@@ -54,67 +54,21 @@
 			// 页面状态 动画效果
 			pageStatus: {
 				type: Number,
-				default: 2,
+				default: 1,
 			},
 		},
 		watch: {},
 		methods: {
-			buttonAnimation() {
-				// 按钮1
-				this.button01Animation()
-				// 按钮2
-				setTimeout(async () => {
-					await this.button02Animation()
-				}, 100)
-				// 按钮3
-				this.button03Animation()
-			},
-			button01Animation() {
-				this.$refs.button01.step({
-					translateX: '-10%',
-					opacity: 0
-				}, {
-					duration: 1000,
-					timingFunction: 'ease',
-				})
-				this.$refs.button01.run(() => {})
-			},
-			button02Animation() {
-				this.$refs.button02.step({
-					translateX: '100%', // Start from right
-					opacity: 0
-				}, {
-					duration: 1000,
-					timingFunction: 'ease',
-				});
-				this.$refs.button02.run(() => {
-					// console.log('Button 02 animation completed!');
-				});
-			},
-			button03Animation() {
-				this.$refs.button03.step({
-					translateX: '100%', // Start from right
-					opacity: 0
-				}, {
-					duration: 1000,
-					timingFunction: 'ease',
-				});
-				this.$refs.button03.run(() => {
-					// console.log('Button 03 animation completed!');
-				});
-			},
 			// 返回上一页
 			gotoLast() {
 				// 先执行动画再返回
 				if (this.buttonData.lastpage[this.buttonData.lastpage.length - 2] == 'default') {
-					this.buttonAnimation()
+					// this.buttonAnimation()
 				}
 				this.$emit('tolastEvent')
 			},
 			// 返回主页
 			gotoBack() {
-				// 先执行动画再返回
-				this.buttonAnimation()
 				this.$emit('backEvent')
 			}
 		}

manifest.json

@@ -43,7 +43,8 @@
             },
             /* ios打包配置 */
             "ios" : {
-                "dSYMs" : false
+                "dSYMs" : false,
+                "idfa" : false
             },
             /* SDK配置 */
             "sdkConfigs" : {}

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "JDF_ElectronicPublicity",
+  "name": "JDF_ElectronicPublicity_uni_css",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

pages/index/home.vue

@@ -15,8 +15,8 @@
 		<homeDetails :itemInfo="detail_info" :isShow="showModel === 'model_detail'" :pageStatus="pageStatus">
 		</homeDetails>
 		<!-- 列表 -->
-		<listModel :list="detail_list" :isShow="showModel === 'model_list'" :pageStatus="pageStatus" :styleType = "style_type"
-			@toDetailEvent="toDetailEvent"></listModel>
+		<listModel :list="detail_list" :isShow="showModel === 'model_list'" :pageStatus="pageStatus"
+			:styleType="style_type" @toDetailEvent="toDetailEvent"></listModel>
 	</view>
 </template>
 
@@ -32,14 +32,14 @@
 				lastpageTitle: 'default',
 				nowTitle: '',
 				showModel: 'default',
-				pageStatus: 2, //页面状态 组件通过监听控制动画效果 
+				pageStatus: 1, //页面状态 1=进入，2=常态，3=退出
 				homeAnimation: {},
 				list: [], // 导航信息
 				detail_list: [], // 列表信息
 				detail_info: {
 					img: '/static/image/homeBg.jpg', // 详情信息
 				},
-				style_type:1
+				style_type: 1
 			}
 		},
 		onLoad() {
@@ -61,6 +61,20 @@
 			}
 		},
 		methods: {
+			// 执行各组件动画
+			Animation_Controls(model_type) {
+				this.pageStatus = 3
+				setTimeout(() => {
+					// 导航切换状态2 进入切换页
+					// this.pageStatus = 2
+					// 导航切换状态3 常态化切换页
+					this.pageStatus = 1
+					this.showModel = model_type
+					setTimeout(() => {
+						// this.pageStatus = 2
+					}, 400)
+				}, 300)
+			},
 			// 获取数据
 			get_data() {
 				data.get_home_list(this)
@@ -77,63 +91,53 @@
 			},
 			// list导航组件传递
 			homeListEvent(e) {
-				this.pageStatus = 1
-				this.buttonData.lastpageIndex = 1
-				setTimeout(() => {
-					if (e.model_type != undefined) {
-						// 按钮组件title
-						this.nowTitle = e.title
-						this.lastpageTitle = e.title
-						// 当前显示组件
-						this.detail_list = e.list
-						this.style_type = e.style_type
-						if(e.list[0].have_detail === 1){
-							this.detail_info.img = e.list[0].inner_img
-							this.showModel = e.model_type
-						}else{
-							this.showModel = 'model_list'
-						}
+				this.buttonData.lastpageIndex = 1 //页面计数器
+				if (e.model_type != undefined) {
+					// 按钮组件title
+					this.nowTitle = e.title
+					this.lastpageTitle = e.title
+					// 当前显示组件
+					this.detail_list = e.list
+					this.style_type = e.style_type
+					if (e.list[0].have_detail === 1) {
+						this.detail_info.img = e.list[0].inner_img
+						// this.showModel = e.model_type
+						this.Animation_Controls(e.model_type) // 执行动画
+					} else {
+						// this.showModel = 'model_list'
+						this.Animation_Controls('model_list') // 执行动画
 					}
-				}, 300);
+				}
 			},
 			// 按钮组件回到首页传递
 			backEvent() {
-				this.pageStatus = 6
-				setTimeout(() => {
-					this.showModel = 'default'
-				}, 300);
+				this.Animation_Controls('default')
 			},
 			// 按钮组件返回上一页
 			tolastEvent() {
 				// 返回到首页
 				if (this.buttonData.lastpage.length === 2) {
-					this.pageStatus = 2
+					// this.pageStatus = 2
 					this.buttonData.lastpage = ['default']
-
-					setTimeout(() => {
-						this.showModel = this.buttonData.lastpage[0]
-					}, 300);
+					this.Animation_Controls(this.buttonData.lastpage[0])
 				} else {
 					// 返回上一页
-					this.pageStatus = 3
+					// this.pageStatus = 3
 					this.buttonData.lastpageIndex -= 1
 					this.buttonData.lastpage.pop()
 					this.nowTitle = this.lastpageTitle
-				console.log('aa',this.lastpageTitle)
-					setTimeout(() => {
-						this.showModel = this.buttonData.lastpage[1]
-					}, 300);
+					this.Animation_Controls(this.buttonData.lastpage[1])
 				}
 			},
 			// 内页传递（到3级页面）
 			toDetailEvent(item) {
-				this.pageStatus = 5
+				// this.pageStatus = 5
 				this.buttonData.lastpageIndex += 1
-				this.nowTitle = item.title
-				setTimeout(() => {
-					this.showModel = 'model_detail'
-					this.detail_info.img = item.inner_img
-				}, 300)
+				setTimeout(()=>{
+					this.nowTitle = item.title
+				},400)
+				this.Animation_Controls('model_detail')
+				this.detail_info.img = item.inner_img
 			}
 		},
 	}