Oto pliki:

script.jsx: (główny skrypt)

document.addEventListener('DOMContentLoaded', () => {
    ReactDom.render(
        <Body>
            <Collage />
        </Body>,
        document.querySelector('#body'),
    );
});

body.jsx:

const Body = function (props) {
    return (
        <>
            {props.children}
        </>
    );
};

export default Body;

collage.jsx:

export default class Collage extends React.Component {
    constructor() {
        super();
        this.state = {
            images: [
                { src: '/home/photos/vertical/1' },
                { src: '/home/photos/vertical/0' },
            ],
        };
    }

    render() {
        return (
            <div className="collage">
                {this.state.images.map(image => <Image src={image.src} key={Math.random()} />)}
            </div>
        );
    }

image.jsx:

const Image = ({ src, alt }) => (
    <img className="collage__img"
         alt={alt}
         src={`${src}.jpg`}
         onTransitionEnd={evt => evt.target.remove()} />
);

Image.propTypes = {
    src: PropTypes.string.isRequired,
    alt: PropTypes.string,
};

Image.defaultProps = {
    alt: '',
};

export default Image;

Tak więc script.jsx powinien renderować Body i Collage elementy. Wszystko, co Body jest po prostu zwraca to dzieci. Collage składa się z jednej div z listą Image. I dane obrazów przechowywane w stanie Collage. Image jest tylko img.

Gdy strona jest ładowana, wszystko działa dobrze. Ale kiedy zmieniam się rozmiar okna, obrazy znikają z jakiegoś powodu.

Jeśli chcesz zobaczyć, jak obrazy znikają, istnieje Video.

To zachowanie wydaje się być złamane. Myślę, że może to być błąd. Ale chcę kogoś, kto rozumie, powiedzmy tak. Jeśli nie, proszę, opisz go.


Powyższy kod może wyglądać dziwnie, ale jest to tylko minimalny powtarzalny przykład. Mogę również udostępniać pełny kod. Oto Repozytorium

1
Yoskutik 3 sierpień 2020, 22:34

1 odpowiedź

Najlepsza odpowiedź

Obrazy rzeczywiście znikają, ponieważ są one usuwane w onTransitionEnd={evt => evt.target.remove()}, jak @Tanmay mówi. Jak rozumiem, że jest celowy i ma się wydarzyć na mobilnych rozmiarach rozmiarów na przejściach krycia Tutaj

Dlaczego miałoby to miejsce na zmianę rozmiaru. Ponieważ jest kolejne przejście, o font-size, to dzieje się na html element Oto. I font-size jest odziedziczoną nieruchomością, dzięki czemu zmienia się dla obrazów i każdego elementu pod html.

Co zrobić, aby go uniknąć, ale pozostaw przemian Removalona na miejscu. Trzy drogi:

  1. Sprawdź nazwę właściwości onTransitionEnd={evt => evt.propertyName === 'opacity' && evt.target.remove()}
  2. Wyraźnie ustawić, jakie właściwości przejście z .collage__img {transition-property: opacity;}
  3. Make font-size nie inherit za pomocą .collage__img {font-size: initial;}

Pójdę z opcją 2. Z pewnością nie jest opcją 3, ponieważ {X0}} Transition i liście onTransitionEnd, aby wywołać na dowolnym innym przejściu, które można dodać w przyszłości.

1
Dmitry 6 sierpień 2020, 09:26