Question

Vue中的转换非常好，但问题是，当DOM在某些内容消失后重新调整时，它会发生震动。因此，具有过渡的东西会逐渐消失，但随后所有周围的元素都会进入合成空间。

人们如何处理这个问题？

Answer 1

这取决于你想要达到的效果。如果你想淡出然后将其他页面元素滑入到位置，你可能会想要使用javascript动画而不是标准的淡入淡出过渡。使用jQuery或velocity这样的效果非常简单。您需要做的就是在视图模型中创建两个方法并使用v-on:enter和v-on:leave绑定它们，因此在您的HTML中，您有：

  <transition v-on:enter="slideFadeIn" v-on:leave="fadeSlideOut">
    <div v-show="show">
       // Fadeable content
    </div>
  </transition>

然后你只需要创建这两个方法（slideFadeIn和fadeSlideOut），这些方法淡出元素然后向上滑动，就像这样（我在这里使用了速度）：

 methods: {
   slideFadeIn(el, done) {
      $(el).velocity('slideDown', 200).velocity({
        opacity: 1
      }, {
        complete: done
      });
    },
    fadeSlideOut(el, done) {
        $(el).velocity({
          opacity: 0,
        },  { duration: 1500 }).velocity('slideUp', 200, {
          complete: done
        });
      }
  },

然后确保您在data中有一个标记，您可以切换以显示和隐藏元素：

data: {
  show: true
}

这是一个关于整个事情的JSFiddle：https://jsfiddle.net/9dt4z4c6/

当然，你可以调整它来完成你想要的任何类型的动画，这里是一个同时淡化和滑动的小提琴：

https://jsfiddle.net/rd9mqs6n/

虽然，如果你喜欢这种效果，你也可以使用正常的过渡，这有点整洁：

https://jsfiddle.net/43zL2cw3/

过渡移动的过渡元素？

1 个答案: