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 改变时的主要内容,如果未能解决你的问题,请参考以下文章

css 过渡不透明度淡入淡出背景

CSS 过渡 - 仅在悬停时淡入淡出元素

在 jQuery 中与 CSS 中的过渡同时使用淡入淡出和淡出

淡入淡出/ css 类过渡发生乱序

CSS过渡在悬停时淡入淡出

使用 CSS 过渡的滑动 + 淡入淡出效果