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

【问题标题】：Prop-based dynamic conditional transition class property in Vue - is it even possible?Vue 中基于 Prop 的动态条件转换类属性 - 甚至可能吗？
【发布时间】：2018-08-24 09:23:59
【问题描述】：

这里是 Vue 爱好者。想象一下 my_face_when：

您有一个美味的 sideNav 组件，它使用 <transition> 优雅地滑到屏幕上。
该组件将接收一个right 属性，这给了它一个男性化的right-aligned 类。
您意识到，要使其成为 schmacken-backen right-aligned，它需要从另一侧滑出。

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

transform: translate(-100%);

与

transform: translate(100%);

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

【问题讨论】：

标签： javascript css vuejs2 vue-component

【解决方案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 范式，我将在这里等待，以防你们中的任何人有更好的解决方案，并将其标记为答案。楚斯！

【讨论】：