应用了过渡效果的 vuejs 过渡组件之外的元素答案

【问题标题】：Elements outside vuejs transition component applied with transition effect应用了过渡效果的 vuejs 过渡组件之外的元素
【发布时间】：2019-10-17 00:13:42
【问题描述】：

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，路由器链路正在移动。

路由器链接应该保持静止，因为它们不在转换标记中。它们在我的浏览器中是动画的。

我已尽力缩小复制。使用其他转场效果，去掉挂载的钩子或者焦点操作，效果不显示。在其他路由对之间切换也不会触发此效果。

【问题讨论】：

标签： css vue.js vue-router css-transforms

【解决方案1】：

我已经弄清楚发生了什么。因为overflow: hidden，没看到clientWidth的变化。如果没有滚动条，当 input 元素聚焦时，我看不到 scrollX 的变化。这就是为什么看起来链接是动画的。

【讨论】：