进入商品详情页时无动画
来源：3-3 项目作业
qq_我不是看不起_0
2020-05-09 11:50:46
product/index.vue代码
-------------------------------
<template>
<transition name="product">
<div class="product">
<header class="g-header-container">
<product-header></product-header>
</header>
</div>
</transition>
</template>
<script>
import ProductHeader from "./header";
export default {
name:'Product',
components:{
ProductHeader
}
}
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.product {
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: $product-z-index;
width: 100%;
height: 100%;
background-color: $bgc-theme;
}
.product-enter-active,
.product-leave-active{
transition: all 0.3s;
}
.product-enter,
.product-leave-to{
transform: translate3d(100%,0,0);
}
</style>
-----------------------------
home/recommend.vu代码
-----------------------------
<template>
<div class="recommend">
<h3 class="recommend-title">热卖推荐</h3>
<div class="loading-container" v-if="!recommends.length">
<me-loading></me-loading>
</div>
<ul class="recommend-list" v-else>
<li class="recommend-item" v-for="(item,index) in recommends" :key="index">
<router-link
class="recommend-link"
:to="{name:'home-product',params:{id:item.baseinfo.itemId}}"
>
<p class="recommend-pic">
<img class="recommend-img" v-lazy="item.baseinfo.picUrlNew" />
</p>
<p class="recommend-name">{{item.name.shortName}}</p>
<p class="recommend-origPrice">
<del>¥{{item.price.origPrice}}</del>
</p>
<p class="recommend-info">
<span class="recommend-price">
¥
<strong class="recommend-price-num">{{item.price.actPrice}}</strong>
</span>
<span class="recommend-count">{{item.remind.soldCount}}件已售</span>
</p>
</router-link>
</li>
</ul>
</div>
</template>
<script>
import { getHomeRecommend } from "api/home";
import MeLoading from 'base/loading'
export default {
name: "HomeRecommend",
components:{
MeLoading
},
data() {
return {
recommends: [],
curPage: 1,
totalPage: 1
};
},
created() {
this.getRecommend();
},
methods: {
update(){
return this.getRecommend()
},
getRecommend() {
if (this.curPage > this.totalPage) {
return Promise.reject(new Error('没有更多了'));
}
return getHomeRecommend(this.curPage).then(data => {
return new Promise(resolve => {
if (data) {
this.curPage++;
this.totalPage = data.totalPage;
this.recommends = this.recommends.concat(data.itemList);
this.$emit('loaded',this.recommends) // 加载完毕传出参数
resolve()
}
})
});
}
}
};
</script>
<style lang="scss" scoped>
@import "~assets/scss/mixins";
.recommend {
&-title {
position: relative;
width: 100%;
padding: 10px 0;
font-size: $font-size-l;
text-align: center;
&:before,
&:after {
content: "";
position: absolute;
top: 50%;
width: 40%;
height: 1px;
background-color: #ddd;
}
&:before {
left: 0;
}
&:after {
right: 0;
}
}
&-list {
@include flex-between();
flex-wrap: wrap;
}
&-item {
width: 49%;
background-color: #fff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
margin-bottom: 8px;
}
&-link {
display: block;
}
&-pic {
position: relative;
width: 100%;
padding-top: 100%;
margin-bottom: 5px;
}
&-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&-name {
height: 36px;
padding: 0 5px;
margin-bottom: 8px;
line-height: 1.5;
@include multiline-ellipsis();
}
&-origPrice {
padding: 0 5px;
margin-bottom: 8px;
color: #ccc;
}
&-info {
@include flex-between();
padding: 0 5px;
margin-bottom: 8px;
}
&-price {
color: #e61414;
}
&-price-num {
font-size: 20px;
}
&-count {
color: #999;
}
}
.loading-container {
padding-top: 100px;
}
</style>
---------------------------------
通过<router-link>标签切换到商品详情页时，没有进入动画，但返回时有动画，请问代码应该怎么修改
1回答
-
同学你好，老师这边把代码放在源码项目中测试，是有动画的。同学检查一下home下面的index.vue中，router-view（渲染路由指定的组件，也就点击商品，商品详情页面会在这里渲染）标签是不是没有包裹<keep-alive>，<keep-alive>是用来缓存组件的，加上之后就有动画了。
这是因为去执行动画时，要根据<transition name="product"> 先去识别这个动画，也就是说看到了有这个动画才会执行。<transition name="product"> 是写在product组件中的。 在点击进入时，此时search组件是没有添加到页面，所以没有识别到就看不到动画效果了，需要缓存下来才可以。这些原理你大概了解一下就行，不需要深究，我们只需要固定记住这里需要配合使用<keep-alive>标签才会有过渡动画的效果。
另外，如果还是没有出现动画，需要把全部的代码粘贴上来，以便老师针对你的项目准确查找问题。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题