전환으로 구성 요소 소품 변경

Question

달성하려는 목표는 전환 애니메이션을 사용하여 불투명도를 변경하여 가시적 인 요소를 변경하는 부드러운 효과를 얻는 것입니다.

구성 요소는 슬라이더입니다. 다음 슬라이드의 슬라이드 불투명도 변경은 현재 슬라이드의 1로 변경되고 0으로 변경됩니다. 슬라이드 구성 요소의

내 첫 번째 버전

export class Slide extends React.PureComponent { 
    render() { 
    let { img, backgroundColor, active, ...props } = this.props; 
    const Wrapper = styled.div` 
     background-image: url(${img}); 
     background-color: ${backgroundColor}; 
     background-size: cover; 
     background-position: 50% 50%; 
     opacity: ${active ? 1 : 0}; 
     transition: opacity 1s; 
    `; 
    return (
     <Wrapper/> 
    ) 
    } 
} 

내 첫번째 생각은 상태에서 현재 슬라이드 인덱스를 저장하는 것이 었습니다. 그래서 내 Slides 컨테이너는 현재 슬라이드가 무엇인지 알며 활성 속성을 true로 변경합니다. 그러나이 슬라이드를 다시 렌더링하면 효과가 나타나며 전환은 표시되지 않습니다. 첫 번째 질문 : 왜?

나는 반응하는 dom으로 노는 것을 끝내었고 나는 현재 요소의 불투명도를 수동으로 바꾼다.

export default class Slider extends Component { 
    __slidesCount; 
    __current; 
    __refs = []; 

    constructor(props) { 
    super(props); 
    this.__current = 0; 
    this.__slidesCount = this.props.children.length 
    } 

    componentWillMount() { 
    // Save number of slides 
    } 

    nextSlide =() => { 
    let next = this.__current < this.__slidesCount - 1 ? this.__current + 1 : 0, 
     nextSlide = this.__refs[next], 
     currentSlide = this.__refs[this.__current]; 

    ReactDOM.findDOMNode(nextSlide).style['opacity'] = 1; 
    ReactDOM.findDOMNode(currentSlide).style['opacity'] = 0; 
    this.__current = next; 
    setTimeout(this.nextSlide, 3000) 
    }; 

    componentDidMount() { 
    // set timeout to run it after component mounting is finished 
    setTimeout(() => { 
     ReactDOM.findDOMNode(this.__refs[0]).style['opacity'] = 1; 
    }, 0); 
    // call function changing slide to next 
    setTimeout(this.nextSlide, 3000) 
    } 

    render() { 
    let { children, ...props } = this.props; 
    let slides = children.map((slide, index) => { 
     return React.cloneElement(slide, { ref: ref => this.__refs.push(ref) }) 
    }); 
    return (
     <SlidesWrapper {...props}> 
     {slides} 
     </SlidesWrapper> 
    ) 
    } 
} 

이 솔루션에 대해 어떻게 생각하십니까? 더 쉽게 할 수있는 방법이 있습니까? 물론 jQuery를 사용하지 않고 외부 CSS 사용을 최소화하고 싶습니다.

Answer 1

편집 :는 영업 이익은 Styled Components을 사용했다, 그는 const Wrapper...는 render() 방법의 내부에 위치했기 때문에 때마다 render()가 호출되는 새 구성 요소를 만드는 것을 밝혀졌습니다.

Slide 구성 요소가 업데이트 될 때마다 Wrapper 구성 요소가 다시 탑재되므로 구성 요소의 새 인스턴스이고 새 HTML 요소이므로 CSS 전환이 발생하지 않습니다.

---

다음은 active 상태가 소품으로 전달 될 때 CSS 전환도 작동 개념의 증거, 외부 CSS없이 UI 상태 제어 : CodePen합니다. 불투명도를 변경하고 그것이 작동하는 것을 보여주기 위해 타협 된 활성 슬라이드를 전환하는 동일한 예제를 사용했습니다.

상태가 변경 될 때 Slide이 다시 렌더링되는 경우이 전체 시퀀스를 다시 렌더링해야하는 다른 것이 있어야합니다. 아마도 귀하의 구성 요소가 제거되고 다시 추가되거나 다른 것일 수 있습니다. 직접 디버깅하거나 더 많은 코드를 제공해야 도움이 될 것입니다.

또는 주석에 언급 된대로 필요가있는 경우 ReactCSSTransitionGroup을 사용할 수 있습니다.