在状态改变时，做动画

Posted 2023-02-22

【中文标题】在状态改变时，做动画

【英文标题】：On state change, do animation

【发布时间】：2021-07-30 17:02:59

【问题描述】：

目前我在 Vue.js 中工作，并且有一个我想要动画的导航菜单。我要做的是在用户将鼠标悬停在其中一个导航按钮上时显示两个 li 元素。 目前我正在做的是将showActivities 的数据类型默认设置为false，并将mouseenter 上的true 和mouseleave 上的false 设置为。因此，这些项目会在悬停时出现和消失，但它们不是动画的。怎么做动画呢？

<ul class="navs">
      <li>Schedule</li>
      <li @mouseenter="showActivities = true" @mouseleave="showActivities = false">Team Activity</li>
      <li v-show="showActivities">tik tak tow</li>
      <li v-show="showActivities">Bejewel</li>
      <li>Resources</li>
      <li class="logout"><a href="https://google.com" target="_blank">Logout</a></li>
    </ul>

<script>
export default 
  name: 'SideMenu',
  data() 
    return 
      showActivities: false,
    ;
  ,
;
</script>

【问题讨论】：

我建议使用嵌套列表来显示/隐藏子菜单，它更容易制作动画并且通常使用它（不要在两个 lis 上使用 v-show，而只在一个 ul 上使用），例如有bootstrap 可以检查。对于您的问题，首先在 showActivities 为 true 时添加类，然后向此类添加动画，仅此而已。而不是使用 v-show，只需使用 css 属性 display/opacity 或 wathever 在动画结束后隐藏子菜单。另一件事是您的动画，未指定。因为对于差异动画，您应该使用差异模式。

【参考方案1】：

好的，如果我没记错的话，您想要一种动画，例如缓慢的淡入淡出。 在 vuejs 转换中，状态附加到可以调用的 CSS 类，并且可以根据需要进行修改。文档对此更清楚 Vuejs Transitions

例如，如果你在你的 css 部分添加这个，过渡将是一个缓慢的淡入淡出：

    .fade-enter-active, .fade-leave-active 
  transition: opacity .5s;

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ 
  opacity: 0;