Vue.js: transform animation doesn't work on click

Question

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:

     <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:

.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);
}

Unfortunately, it didn't work out. My previous solution actually added a new class with transform but it didn't move my icon anyway... — Olga B, Mar 02 '18 at 10:02
This is very elaborate way to do this. Drop computed `arrowLeft` entirely and replace div with `
` — Jakub Fedyczak, Mar 02 '18 at 10:06
It still adds a class with transform but nothing happens. Maybe something wrong with the animation itself? — Olga B, Mar 02 '18 at 10:13
No other ideas. Just make sure your CSS is being loaded correctly. — Jakub Fedyczak, Mar 02 '18 at 10:17

Jacob Goh · Accepted Answer · 2018-03-02T10:41:37.373

2

Sometimes, rotate won't work on inline elements.

Try

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

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

edited Mar 02 '18 at 10:41

answered Mar 02 '18 at 10:26

Jacob Goh

19,800
5
53
73

Oh my god! It works! Thanks a lot! I was desperate to solve this. Maybe you have some ideas for my another question? https://stackoverflow.com/questions/49064813/vue-js-toggle-hamburger-menu-icons – Olga B Mar 02 '18 at 11:15

Vue.js: transform animation doesn't work on click

1 Answers1