Question

反正会变成黑色，然后从黑色淡出到下一个屏幕吗？

已经搜索了一段时间，我只找到了改变屏幕不透明度或从左到右或从右到左移动它的方法，但是我没有找到从屏幕到黑色的过渡。任何帮助将非常感激。

Answer 1

只需在屏幕后面放置黑色function triple_decrypt($input){ $key = "thisis87658748639testkey"; $cipher = "des-ede3"; $ivlen = openssl_cipher_iv_length($cipher); $iv = openssl_random_pseudo_bytes($ivlen); $pwd = openssl_decrypt($input, $cipher, $key, $options=0, $iv); return $pwd; }，然后

感谢@ Prajwal，CSS过渡解决方案：

<div>

document.getElementsByTagName(`main`)[0].style.opacity = `0`;

  main {
    position: fixed; /* place it before .black */
    background-color: white;
    width: 100%;
    height: 100%;
    transition-property: opacity; /* set opacity to one of the transition properties */
    transition-duration: 4s; /* set transition duration */
  }

  .black {
    position: fixed; /* place it behind main */
    background-color: black; /* make it black */
    width: 100%; /* make it fill available space */
    height: 100%; /* make it fill available space*/
  }

  body {
    margin: 0; /* make it fill available space*/
  }

您还可以使用setInterval()函数一点一点地降低不透明度。

<body>
<div class="black"></div>
<main>
  <p>lorem</p>
</main>
</body>

  const step = 0.05; // set the step of opacity change
  const timeInterval = 200; // set the sleep time of opacity change
  const times = 1 / step; // calculate times needed for opacity change
  document.getElementsByTagName(`main`)[0].style.opacity = `1`; // set initial opacity to make getting the float value of it work.
  let time = 0; // initially, the time of making changes is zero
  const lowerOpacity = window.setInterval(function() {
      if (time + 1 === times) {
        window.clearInterval(lowerOpacity);
      } // clearInterval() when the time of changes has reached the needed times
      document.getElementsByTagName(`main`)[0].style.opacity =
        `${parseFloat(document.getElementsByTagName(`main`)[0].style.opacity) -
        0.05}`; // set the opacity to make it dimmer
      time += 1; // increment time to match the changed times
    }
    , timeInterval);

  main {
    position: fixed; /* place it before .black */
    background-color: white;
    width: 100%;
    height: 100%;
  }

  .black {
    position: fixed; /* place it behind main */
    background-color: black; /* make it black */
    width: 100%; /* make it fill available space */
    height: 100%; /* make it fill available space*/
  }

  body {
    margin: 0; /* make it fill available space*/
  }

Answer 2

如果使用的是最新版本的react-navigation-stack，则可以使用CardAnimationContext / useCardAnimation来实现：

import * as React from 'react';
import { Animated, Button, View, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {
  createStackNavigator,
  CardStyleInterpolators,
  HeaderStyleInterpolators,
  useCardAnimation,
} from 'react-navigation-stack';

function ScreenA({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
      <Button onPress={() => navigation.push('ScreenB')} title="Go to B" />
    </View>
  );
}

function ScreenB() {
  const { current } = useCardAnimation();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Animated.View
        style={[
          StyleSheet.absoluteFill,
          { backgroundColor: 'black', opacity: current.progress },
        ]}
      />
    </View>
  );
}

const Stack = createStackNavigator({
  ScreenA,
  ScreenB,
});

渐隐至黑色过渡

2 个答案: