react, css) 淡入淡出的过渡 css,当背景图像用 className 改变时
Posted
技术标签:
【中文标题】react, css) 淡入淡出的过渡 css,当背景图像用 className 改变时【英文标题】:react, css) transition css for fade in and out, when background image is changed with className 【发布时间】:2019-08-25 19:47:20 【问题描述】:我每 3 秒更改一个 div 的类名(状态更改,使用 setInterval)。 每个类都有不同的背景图像。
我想在背景图像发生变化时淡入淡出,使用过渡 css。我看到了一些更简单的例子,但是我有两个以上的元素要改变/改变状态改变图片。
我该怎么做?
我将代码上传到:https://stackblitz.com/edit/react-ubxffz 但是我无法在此页面上上传图像,因此暂时将其替换为此页面中的背景颜色。
这是图片幻灯片组件。
const imgUrls = [
1,2,3
];
class ImageSlide extends Component
render()
const url = this.props;
const Text=...
return (
<div>
<div className=`pic$url`>
<p className="p1_1">Text.p1_1</p>
</div>
</div>
);
这是App组件,调用ImageSlide。
class App extends Component
constructor (props)
super(props);
currentImageIndex: 0,
;
// ...
componentDidMount()
this.interval = setInterval(() =>
this.nextSlide(); //this function change the index state.
, 3000);
componentWillUnmount()
clearInterval(this.interval);
// ...
<ImageSlide url=imgUrls[this.state.currentImageIndex] />
这是每个类的css,设置背景图片。
.pic1
background-image: url('images/img_01.png');
.pic2
background-image: url('images/img_02.png');
.pic3
background-image: url('images/img_03.png');
【问题讨论】:
你能把代码贴在这里 fork 并告诉我们链接:stackblitz.com/edit/react-5zsqnt?file=index.js감사합니다! 谢谢。我上传到:stackblitz.com/edit/react-ubxffz。但我无法在此页面上传图片 【参考方案1】:它的工作原理是这样的:要淡化背景:您需要有两个具有不同背景图像的元素,它们相互堆叠,然后交叉淡化
stackblitz 中的工作代码。
没有框架的工作代码:
const imgUrls = [
1,2,3
];
let currentIndex = 0;
const lastIndex = imgUrls.length - 1;
const nextSlide = () =>
currentIndex++;
currentIndex = currentIndex % (lastIndex + 1)
// @See https://css-tricks.com/restart-css-animation/
const elm = document.getElementById('root')
.querySelector('[class^="pic"],[class*=" pix"]');
elm.className = `pic$currentIndex+1`
const newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
interval = setInterval(() =>
console.log()
nextSlide(); //this function change the index state.
, 3000);
#root
position: relative;
width: 640px;
height: 480px;
#root .front,
#root .back
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
#root .front
z-index: 2;
opacity: 0;
#root .back
z-index: 1;
opacity: 1;
#root [class^="pic"] .front,
#root [class*=" pic"] .front
-webkit-animation: in 3s 0s;
animation: in 3s 0s;
#root .pic1 .front,
#root .pic2 .back
background-image: url("https://picsum.photos/640/480?image=1");
#root .pic1.init .back
background-image: none;
#root .pic2 .front,
#root .pic3 .back
background-image: url("https://picsum.photos/640/480?image=2");
#root .pic3 .front,
#root .pic1 .back
background-image: url("https://picsum.photos/640/480?image=3");
@-webkit-keyframes in
from
opacity: 0;
to
opacity: 1;
@keyframes in
from
opacity: 0;
to
opacity: 1;
<div id="root">
<div class="pic1 init">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
【讨论】:
这个平台(stackexchange)上的每个代码都在Creative Commons licence和CC-BY SA 3.0下 不是让两个图像相互叠加并为其不透明度设置动画,是否可以通过更改特定图像的显示来做到这一点?所以可以说我有 3 个图像每 3 秒切换一次,非活动图像将有display:none
。这还能用吗? @yunzen
@ertemishakk 您不能为display
属性设置动画。所以不可能以你想要的方式进行【参考方案2】:
对每个类使用animation
,如下所示:
See working code
화이팅!!
.pic1
background-image: url('images/img_01.jpg');
animation: fade 3s infinite;
.pic2
background-image: url('images/img_02.jpg');
animation: fade 3s infinite;
.pic3
background-image: url('images/img_03.jpg');
animation: fade 3s infinite;
@keyframes fade
0%,100% opacity: 0
50% opacity: 1
【讨论】:
【参考方案3】:我找到了一个带有 react hooks 的解决方案
import React, useState, useEffect from "react";
const heroImage = ["hero1.svg", "hero2.svg"];
export default function Home()
const [activeIndex, setactiveIndex] = useState(0);
useEffect(() =>
setInterval(() =>
currentImageIndex === 0 ? setactiveIndex(1) : setactiveIndex(0);
, 3000);
);
return (
<div>
<img
className=styles.featureImage
src="img/" + heroImage[activeIndex]
alt="imageTitle"
/>
</div>
);
CSS 看起来像这样
.featureImage
height: 600px;
width: 600px;
animation: fade 3s infinite;
【讨论】:
以上是关于react, css) 淡入淡出的过渡 css,当背景图像用 className 改变时的主要内容,如果未能解决你的问题,请参考以下文章