vue js在元素上应用animate函数

Question

如何在vuejs中的元素上应用.animate函数？

<aside v-transition v-if="toggleMenu">
  <a href="#">Haha</a>
  <a href="#">Nice</a>
  <a href="#">Menu</a>
</aside>  

类似的js代码看起来像

if (toggleMenu) {
  $('aside').animate({width: 'toggle'}, 200);
}

我尝试过绑定style属性，

<aside v-transition :style="{width: toggleMenu?'toggle':'200px'}">

但它无法动画。我试图通过vue实现类似的东西。

Answer 1

这是一个更新的Code Pen，它使用Vue JS在侧边栏上切换CSS类：

https://codepen.io/officert/pen/JvZOoB

这里是旁边的元素：

<aside :class="{ 'open' : sidebarOpen }">

这里的CSS旁边：

aside {
  position: absolute;
  width: 300px;
  height: 100%;
  background: #383838;
  left: -300px;
  top: 0;
  transition: left 0.1s ease-in;
}
aside.open {
  left:0;
}

这里是进行切换的Vue组件方法：

toggleSidebar() {
  this.sidebarOpen = !this.sidebarOpen;
}