Javascript 使用vue中的渲染函数进行可重复使用的转换

我目前正在制作幻灯片模型。类似于，但它应该从左向右滑动。除此之外，我想使用一个可重用的组件

我的

SlideLeftTransition.ts

import { defineComponent, createElement as h } from '@vue/composition-api';

export const SlideLeftTransition = defineComponent({
  setup(_, context) {
    return function render() {
      return h('transition', {
        props: {
          name: 'animated slideInLeft',
          mode: 'out-in',
        },
      }, 'default' in context.slots ? context.slots.default() : null);
    };
  },
});

然后我使用的组件如下所示：

import { defineComponent, createElement as h } from '@vue/composition-api';
import { SlideLeftTransition } from '@/ui/components/transitions/SlideLeftTransition';

export const ModalSidePanel = defineComponent<ModalSidePanelProps>({
  setup(props) {
     return function render() {
        return h(SlideLeftTransition, [
          h('div', { style: { display: props.active ? 'block' : 'none' } }, 'this text should appear from left to right sliding'),
        ])
     }
  }
})

令人难忘的是，没有渲染幻灯片动画。当通过一个按钮进行切换时，元素会神奇地出现在屏幕上。几乎没有关于如何在转换中使用渲染函数的文档。有人知道吗？

有几个问题：

.name

只能是一个字符串（不带分隔符）。此字符串用作动画期间应用的类名。我猜您希望名称为

slideInLeft

//SlideTransition.ts
返回h（'transition'{
道具：{
//名称：“动画幻灯片左侧”，❌
名称：'slideInLeft'，✅
模式：“输入输出”，
},
})

转换样式文件（

SlideTransition.scss

）应在

SlideTransition.ts

中导入，以便将样式应用于内容元素

//SlideTransition.ts
导入“./SlideTransition.scss”

转换样式的目标应为

\uuuuu transition\u NAME\uuuuuuu-进入活动状态

和

\uuuuuu transition-NAME\uuuu-保持活动状态

：

.slideInLeft{
&-进入活动状态{
动画：slideInLeft.30s；
}
&-保持活动状态{
动画：左滑15秒反转；
}
}

必须添加/删除

的默认槽才能使动画生效，因此

ModalSidePanel

的渲染功能必须有条件地提供子元素，而不是使用

显示：块/none

。另外，请确保使用选项API声明您的

道具

：

export const ModalSidePanel=defineComponent({
道具：{
活动：布尔值
},
设置（道具）{
返回函数render（）{
返回h(
SlidelFTTransition，
//静态子级（无转换）❌
h（'div'，{style:{display:props.active？'block'：'none'}}}，“…”），
//有条件地添加✅
props.active&[h（'div'，null，…'）]
)
}
}
})    

---

当我在Stackoverflow中回答有关VueJS的问题时，我总是看到您在问题答案中弹出。我对您的VueJS知识深表钦佩，并对您在@tony19收到如此好的书面答复感到自豪和感谢。

$animationDuration: 1;

.animated {
  animation-duration: $animationDuration;
  animation-fill-mode: both;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}