关于作业 - 商品细节页面 -1

<router-link class="recommend-link"
    v-bind:to="{ name:'home-product', params: {id: item.baseinfo.itemId} }"
>
</router-link>

<template>
<transition name="product">
    <div class="product">
    product
    </div>    
</transition>
</template>

<style lang="scss" scoped>
    // 过程中的
    .product-enter-active,
    .product-leave-active {
    transition: all 0.3s;
    }
    
    // 刚开始进入 和 离开
    .product-enter,
    .product-leave-to {
    transform: translate3d(100%, 0, 0);
    }
</style>

请问老师：

为什么我写这样点击的时候，没有从右到左的动画效果？

慕小庄 2019-09-03

源自：实战：Vue 完成分类、搜索页 3-3 项目作业

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-09-04 18:52:57

你好同学，因为v-show相当于display：none，就是让这个组件彻底隐藏了，所以看不到动画效果，如果想要使用它，会用到同学现在没有接触过的知识，这个用到的不多，老师给你写一下，你暂时了解一下就行。使用v-if更简单一些，推荐同学按照老师第一次回复的进行修改即可哦。

祝学习愉快，望采纳。

收起回答

好帮手慕夭夭 2019-09-04 10:43:38

你好同学，在Vue 提供了 transition 的封装组件中，只有4种情况可以给元素和组件添加进入/离开过渡

1.条件渲染 (使用 v-if)

2.条件展示 (使用 v-show)

3.动态组件

4.组件根节点

像咱们课程里面的搜索框点击时可以实现动画是因为搜索组件本身在根节点下，而同学的代码中，做的是商品页面，点击商品进入详情页面，即product详细页面，就已经离开根节点，所以没有动画效果。你可以给product页面中设置v-if ，默认让它隐藏，然后挂载组件的时候让它显示。这样就满足第一个v-if的情况，点击进入的时候就有动画了哦。参考如下设置：

祝学习愉快，望采纳。

收起回答

提问者慕小庄 #1

老师，请问一下，我使用 v-show="isShow" 之后，他虽然点击有动画了，但我在返回首页的时候，就没有动画了，我使用的是在icon-back上触发点击命令 methods: { goback() { this.$router.back(); } },

2019-09-04 11:31:15