CSS 전환을 사용하는 트리거 방법은 무엇입니까?

트리거 방법은 다음과 같습니다. 1. 의사 클래스 요소 ":hover"에 의해 트리거되며 구문은 "요소 {전환: 속성 전환 시간} 요소:hover {속성: 속성 값}"입니다. 2. "요소"에 의해 트리거됩니다. .classList.add(" 요소 이름 ")" 문은 CSS 전환 효과를 트리거합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

첫 번째 유형: 의사 클래스 요소에 의해 트리거

	<style>
		.box{
      		width: 100px;
      		height: 100px;
      		background-color: blueviolet;
      		transition: width 1s linear .5s;
    	}
    	.box:hover{
      		width: 400px;
    	}
	</style>
	<p class="box">
    </p>

두 번째 유형: JS에 의해 트리거

js를 통해 추가할 때 요소 스타일을 변경하려면 특정 지연(지연 제거는 효과가 없음)이 있어야 합니다.

<style>
	.box{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      transition: width 1s linear .5s;
    }
    .box1{
      width: 400px;
    }</style>
<p class="box">    
</p>

<scrpit>
	setTimeout(() => {
      let element = document.getElementsByClassName(&#39;box&#39;)[0];
      element.classList.add(&#39;box1&#39;)
    }, 1) </scrpit>

권장 학습: css 비디오 튜토리얼

위 내용은 CSS 전환을 사용하는 트리거 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!