CSS3 전환을 위한 트리거 방법은 무엇입니까?-프런트엔드 Q&A-php.cn

CSS3 전환을 위한 트리거 방법은 무엇입니까?

青灯夜游

풀어 주다： 2021-12-15 11:20:19

원래의

2817명이 탐색했습니다.

css3 전환에는 두 가지 트리거 방법이 있습니다. 1. ":hover", ":focus", ":checked" 등을 포함한 의사 클래스 요소에 의해 트리거됩니다. 2. js 또는 Jquery 코드를 사용하여 수정합니다. CSS 속성을 사용하여 전환의 그라데이션을 트리거합니다.

CSS3 전환을 위한 트리거 방법은 무엇입니까?

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

transition

전환은 CSS3에서 가장 간단한 애니메이션입니다. 요소의 속성이 변경되면 그라데이션 방식으로 표시할 수 있습니다. 다음 코드는 전환을 추가한 결과입니다. , 길이는 점차 300px로 늘어납니다.

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

로그인 후 복사

Css3 전환 트리거 방법

첫 번째: hover, focus,checked 등을 포함한 의사 클래스 요소를 통해 트리거됩니다.

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

<p class="box"></p>

로그인 후 복사

그러나 실제 사용에서는 , 속성을 직접 수정하기 위해 주로 JS 또는 Jquery를 사용하지만 직장에서는 이것이 작동하지 않는 것으로 나타났습니다.

두 번째: JS에 의해 트리거

JS 또는 Jquery를 사용하여 CSS 속성을 직접 수정하는 경우

JS 트리거 방법은 클래스가 변경되어 새로운 스타일을 얻을 수 있어야 합니다.

제가 이해한 바에 따르면, 새로운 속성을 얻을 수 있도록 요소를 변경해야 합니다. 이는 의사 클래스 트리거링의 경우 새로운 스타일을 얻을 수 있도록 클래스를 변경해야 한다는 것입니다. 얻을 수 있습니다.

p에 새 클래스를 추가하여 p가 클래스를 변경하고 획득하게 하면 전환의 그라데이션이 트리거될 수 있습니다.

<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 영상 튜토리얼)

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