vue.js过渡组件外部的元素已应用过渡效果

Question

Vue版本 2.6.10

请参阅reproduction。

<router-link to="/a"><a name="/a">[a]</a></router-link>
<router-link to="/b"><a name="/b">[b]</a></router-link>
<router-link to="/c"><a name="/c">[c]</a></router-link>
<transition :name="transitionName">
  <router-view></router-view>
</transition>

这里有3条路线。从A切换到B，路由器链接正在移动。

路由器链接应该保持静止，因为它们不在过渡标记中。它们在我的浏览器中具有动画效果。

我已尽力减少复制。使用其他过渡效果，移除已安装的挂钩或聚焦操作，效果不会出现。在其他路由对之间切换也不会触发此效果。

Answer 1

I have figured out what is happening. Because of overflow: hidden, I did not see the change of clientWidth. Without the scrollbar I did not see the change of scrollX when the input element is focused. That's why it looks like the links are animated.