Vue实现点击按钮使图片平移到某个位置怎么实现？有个时间间隔有点动画效果

Question

现在使用animate插件可以实现点击按钮使元素消失出现，是通过设置show属性。现在不知道实现位置变化怎么写，思路是应该是图片有个初始位置，有个结束位置，但这些属性在哪写呢？return里的data里吗？

Answer 1

为图片容器.imgDiv设置css动画，贼香，如

.imgDiv  {
  animation-duration: 2s;
  animation-name: imgmove;
}
@keyframes imgmove {
  from {
    margin-left: 50px;
  }
  to {
    margin-left: 100px;
  }
}

当然，如果你不想影响页面布局，那可以将图片容器设置成绝对定位