反正会变成黑色,然后从黑色淡出到下一个屏幕吗?
已经搜索了一段时间,我只找到了改变屏幕不透明度或从左到右或从右到左移动它的方法,但是我没有找到从屏幕到黑色的过渡。任何帮助将非常感激。
答案 0 :(得分:0)
只需在屏幕后面放置黑色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*/
}
答案 1 :(得分:0)
如果使用的是最新版本的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,
});