[英]Vue.js: transform animation doesn't work on click
I have an arrow icon inside a menu item. 我在菜单项中有一个箭头图标。 When I click on this item, a small additional menu drops down.
当我单击此项目时,将弹出一个小的附加菜单。 I need to find a solution how to rotate my icon at the same time as my dropdown menu appears.
我需要找到一种解决方案,如何在出现下拉菜单的同时旋转图标。 My approach doesn't work.
我的方法行不通。
Here is what I have in the Vue component: 这是我在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>
In my script tags: 在我的脚本标签中:
<script>
export default {
data() {
return {
showDropdown: false,
};
},
computed: {
arrowLeft() {
let arrow = 'turn-arrow';
if (this.showDropdown === true) {
return arrow;
}
return true;
},
},
};
</script>
My CSS: 我的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);
}
Sometimes, rotate won't work on inline elements. 有时,旋转不适用于嵌入式元素。
Try 尝试
.arrow {
display: inline-block; /* or block */
}
See https://stackoverflow.com/a/28664701/5599288 参见https://stackoverflow.com/a/28664701/5599288
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.