vue+css动画实现下拉菜单上、下箭头切换

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+css动画实现下拉菜单上、下箭头切换相关的知识,希望对你有一定的参考价值。

参考技术A CSS的rotate只 对block或 inline-block类型元素有效

Vue.js:转换动画在点击时不起作用

我在菜单项中有一个箭头图标。当我点击这个项目时,一个小的附加菜单会下降。我需要找到一个解决方案,如何在我的下拉菜单出现的同时旋转我的图标。我的方法不起作用。

这是我在Vue组件中的内容:

     <nav>
        <section class="nav-item" @click="showDropdown = !showDropdown">
          <div class="nav-icon">
            <img src="../../../assets/img/users.svg" />
          </div>
          <h4>Users</h4>
          <div class="arrow" :class="arrowLeft">
            <img src="../../../assets/img/arrow_down.svg" />
          </div>
          <div v-if="showDropdown">
            <span class="sub-nav-item">Import</span>
            <span class="sub-nav-item">Invitations</span>
          </div>
        </section>
      <section class="nav-item">
        <div class="nav-icon">
          <img src="../../../assets/img/polls.svg" />
        </div>
        <h4>Poll</h4>
      </section>
    </nav>

在我的脚本标签中:

<script>
export default {
data() {
  return {
    showDropdown: false,
  };
},
computed: {
  arrowLeft() {
    let arrow = 'turn-arrow';
    if (this.showDropdown === true) {
      return arrow;
    }
    return true;
   },
 },
};
</script>

我的CSS:

.arrow {
display: inline;
height: 7px;
width: 13px;
margin-left: 13px;
} 
.turn-arrow {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
答案

有时,旋转不适用于内联元素。

尝试

.arrow {
    display: inline-block; /* or block */
}

https://stackoverflow.com/a/28664701/5599288

以上是关于vue+css动画实现下拉菜单上、下箭头切换的主要内容,如果未能解决你的问题,请参考以下文章

Angular 4 动画下拉菜单

css 菜单下拉箭头随fontawsome而变化

悬停在下拉菜单上时保持主导航项悬停 CSS

用点击事件的方式 实现二级下拉菜单(用javaScript与jquery,vue)

如何使用 AngularJS 和 CSS 滑动切换列表元素

asp二级联动下拉菜