Vue中基于Prop的动态条件转换类属性 - 它甚至可能吗？

Question

在这里制作的Vue爱好者。想象一下my_face_when：

1. 您有一个美味的sideNav组件，可以使用<transition>优雅地滑到屏幕上。
2. 该组件将接收right道具，为其提供男性right-aligned等级。
3. 你意识到它是一个schmacken-backen right-aligned它需要从另一边滑落。

问题：我怎样才能恢复我的家人的荣誉，无法从组件内部访问CSS属性以某种方式交换

transform: translate(-100%);

与

transform: translate(100%);

里面<transition>所需的.slide-enter, .slide-leave-to CSS类样式声明在<style>标记的深处？我想我快死了，请为我复仇。

Answer 1

我花了一天时间和几支烟来解决这个问题，但是，因为我无法与<style>人交往，我接着建立了约束力：

<transition :name="slideSide">

，一种相当紧凑的城市computed方法：

computed: {
  slideSide() {
    if (this.right) {
      return "slideRight";
    }
    return "slideLeft";
  }
},

最后，两组完全独立的CSS过渡类：

.slideLeft-enter, .slideLeft-leave-to {
  transform: translate(-100%);
  ...

.slideRight-enter, .slideRight-leave-to {
  transform: translate(100%);
  ...

它按预期工作，我的家庭荣誉得到恢复。由于这个解决方案彻底强奸DRY范式，我将在这里等待你的任何一个有更好的解决方案，将其标记为答案。 Tschüss！