我在写的时候出现了一个问题就是蓝色的动态按钮会渐变
来源：7-11 -自定义hooks-useTransition 实现加入购物车动画效果
秋得法
2023-11-24
<Transition @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
<div v-show="v.isShown" class="ball">
<div class="inner"></div>
</div>
</Transition>
后来发现默认回事渐变模式，应该在Transition中加上name=“false”
<Transition name="false" @beforeEnter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
<div v-show="v.isShown" class="ball">
<div class="inner"></div>
</div>
</Transition>
这样就解决问题了。应该是vant版本带来的问题
https://cn.vuejs.org/api/built-in-components.html#transition这里查了下发现默认过渡模式是开启的
有遇到同样问题的可以用这种方式解决。
写回答
1回答
-
one_pieces
2023-11-27
同学你好，Transition 动画的原理其实就是在不同的时机里给对应的元素插入不同时机的动画 class 名，然后我们在对应的 css class 里设置动画属性，比如 transition，具体可以详细看下官网的介绍，https://cn.vuejs.org/guide/built-ins/transition.html 。而 Transition 的 name 只是来用自定义 Transition class 的前缀，就像上面截图注释里说的，如果为 fade，那么进入动画的 class 名字就会是 fade-enter。
至于你遇到的问题，可能是你定义了 .enter 或者 .enter-active 这些 class 名？
032023-12-05
相似问题