Skip to main content

flip()v4.0.54

一个演示，退出幻灯片翻转180度，显示下一张幻灯片的背面。

A
B

示例​

SlideTransition.tsx
tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { flip } from "@remotion/transitions/flip";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={flip()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
SlideTransition.tsx
tsx
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { flip } from "@remotion/transitions/flip";
 
const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={flip()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

API​

接受一个具有以下属性的对象：

direction​

其中之一：from-left，from-right，from-top，from-bottom。

TypeScript type
tsx
import { FlipDirection } from "@remotion/transitions/flip";
 
const flipDirection: FlipDirection = "from-left";
TypeScript type
tsx
import { FlipDirection } from "@remotion/transitions/flip";
 
const flipDirection: FlipDirection = "from-left";

perspective?​

翻转动画的CSS perspective。默认为 1000。

outerEnterStyle?v4.0.84​

场景进入时外部元素的样式。

outerExitStyle?v4.0.84​

场景退出时外部元素的样式。

innerEnterStyle?v4.0.84​

场景进入时内部元素的样式。

innerExitStyle?v4.0.84​

场景退出时内部元素的样式。

另请参阅​