집 >웹 프론트엔드 >CSS 튜토리얼 >순수 CSS3 코드는 여러 요소를 순서대로 표시합니다.

순수 CSS3 코드는 여러 요소를 순서대로 표시합니다.

php中世界最好的语言원래의: 2018-03-20 16:27:361710검색

이번에는 여러 요소를 순차적으로 표시하는 순수 CSS3 코드를 소개하겠습니다. 순수 CSS3 코드로 구현하기 위한 주의사항은 무엇인지 살펴보겠습니다.

위 그림과 같이 이러한 애니메이션 효과는 많은 이벤트 홍보 HTML5에서 자주 사용됩니다. 특히 연말이 다가옴에 따라 회사의 이벤트 페이지 작업으로 바쁜 학생도 있을 수 있습니다. 이런 소소한 기술을 익히는 것이 도움이 될 수도 있습니다.

CSS3에서는 키프레임과 결합된 애니메이션을 사용하여 요소에 다양한 애니메이션 효과를 추가합니다. 특정 애니메이션은 키프레임에 정의되어 애니메이션에 사용됩니다. 예를 들어 위에서 날아오는 애니메이션 효과를 정의할 수 있습니다.

@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}

그리고 대상 요소에서 애니메이션을 통해 애니메이션을 사용합니다.

<p class="target topIn"></p>
.topIn {
  animation: topIn 1s ease;
}

이런 방식으로 요소가 DOM에 처음 렌더링되면 위에서 아래로 변위 애니메이션 효과가 발생합니다. 물론, 이 효과는 우리가 원하는 것이 아닙니다. 종종 애니메이션에 0에서 1까지의 투명도 그라데이션을 추가하기도 합니다.

@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}

또한 요소의 표시 타이밍을 제어할 수 있기를 원합니다. 어떻게 해야 할까요? 더 간단한 방법은 애니메이션 효과가 필요할 때만 대상 요소에 애니메이션을 제어하는 클래스 스타일을 추가하는 것입니다.

btn.addEventListener('click', function() {
  document.querySelector('.target').classList.add('topIn');
}, !1);

하지만 여기에는 문제가 있습니다. 나는 그것을 실천한 친구들이 이미 이것을 발견했다고 믿습니다. 우리는 장면에 들어가기 전에 요소가 보이지 않는 상태에 있을 것으로 예상합니다. 하지만 위의 작업만 수행하면 애니메이션이 시작되기 전에 해당 요소를 볼 수 있습니다. 그렇다면 어떻게 해야 할까요?

요소에 display: none 또는 visible: Hidden을 추가하는 것을 쉽게 생각할 수 있습니다. 그러나 display: none 이후에는 요소가 공간을 차지하지 않습니다. 따라서 이 경우 페이지 레이아웃에 혼란이 발생할 수 있습니다. 따라서 시작하기 전에 요소에 새 클래스를 추가합니다.

.aninode {
  visibility: hidden;
}

요소를 표시하려면 새 클래스를 추가하세요.

.animated .aninode {
  visibility: visible;
}

애니메이션 효과를 제어하는 클래스도 CSS에서 약간의 조정이 필요합니다.

.animated .topIn {
  animation: topIn 1s ease;
}

이 방법의 장점은 효과를 얻으려면 클래스에 애니메이션만 추가하면 된다는 것입니다. Instance 데모전체 코드는 다음과 같습니다.

<p class="container">
  <p class="target aninode leftIn"></p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 100px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.target {
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 4px;
  margin: 20px 0;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation: leftIn 1s ease;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
var show = document.querySelector('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
  container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
  container.classList.remove('animated');
}, !1);

Demo는 다음과 같이 표시됩니다.

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/NXKrPg/&#39;>NXKrPg</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

codepen 데모 주소

하지만 이는 우리가 원하는 효과와는 조금 거리가 있는 것 같습니다. 계속 생각해보세요. 우선, 다음 요소가 이전 요소보다 늦게 나타나도록 하려면 지연 시간을 설정하는 클래스가 많이 있어야 합니다.

.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}

animation-fill-mode: backs!important; 목적은 요소가 나타나기 전에 요소의 투명도를 0으로 유지하는 것입니다. 애니메이션을 추가한 후 요소가 바로 표시되는 것을 방지합니다.

새 클래스에서 애니메이션 약어를 사용할 때 animation-fill-mode 속성을 덮어쓰는 것을 방지하기 위해 !important를 추가했습니다. 여기에 !important를 쓰지 않으면 topIn과 같은 애니메이션 클래스에서는 축약형을 사용할 수 없습니다.

이후에는 위의 코드를 CSS에 추가하고 HTML을 일부 변경하면 원하는 효과를 얻을 수 있습니다.

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/mpbEEE/&#39;>mpbEEE</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

codepen 데모 주소

전체 코드는 다음과 같습니다.

<p class="container">
  <p class="targets aninode">
      <p class="item leftIn">春晓</p>
      <p class="item leftIn delay200">春眠不觉晓</p>
      <p class="item leftIn delay400">处处蚊子咬</p>
      <p class="item leftIn delay600">夜来风雨声</p>
      <p class="item leftIn delay800"><此处请留下你们的才华></p>
  </p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 200px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.targets {
  margin: 20px 0;
}
.targets .item {
    border: 1px solid #ccc;
    margin: 10px 0;
    line-height: 2;
    padding: 2px 6px;
    border-radius: 4px;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation-name: leftIn;
  animation-duration: 1s;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}
var show = document.querySelector('.show');
var hide = document.querySelector('.hide');
var container = document.querySelector('.container');
show.addEventListener('click', function() {
  container.classList.add('animated');
}, !1);
hide.addEventListener('click', function() {
  container.classList.remove('animated');
}, !1);

우리는 js의 로직이 어떤 식으로든 변경되지 않은 것을 발견했습니다. 적절한 경우 애니메이션을 추가/제거하기만 하면 됩니다.

이스터 에그:

실제로 우리는 더 골치 아픈 일에 직면하게 될 것입니다. 수업 작성을 미루는 것입니다. 어떤 시차가 사용될지, 얼마나 많은 요소가 사용될지 알 수 없으므로 모두 손으로 작성하면 작업을 반복하기가 너무 번거롭습니다. 따라서 js를 사용하여 동적으로 삽입할 수 있습니다. 코드는 다음과 같습니다.

const styleSheet = getSheet();
var delay = 100;
while (delay < 10000) {
    styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length);
    delay += delay < 3000 ? 100 : 1000;
}
function getSheet() {
    var sheets = document.styleSheets;
    var len = sheets.length;
    for(var i = 0; i <= len; i++) {
        var sheet = sheets.item(i);
        try {
            if (sheet.cssRules) {
                return sheet;
            }
        } catch(e) {} 
    }
    var style = document.createElement('style');
    style.type = "text/css";
    document.getElementsByTagName('head')[0].appendChild(style);
    return style.sheet;
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!