CSS 만들기 : 활성화 전환 :

나는 웹 프리젠 테이션을 만들려고 노력 중이며 클릭 (위의 방식으로 작동)에서 위아래로 움직이는 2 개의 반쪽 애니메이션을 추가하고 싶었지만 그곳에 머물기를 원합니다. 클릭 후CSS 만들기 : 활성화 전환 :

standard looking version http://img5.fotos-hochladen.net/uploads/3ozt9kfyr08.jpg 0.75 seconds after the click on the logo in the middle http://img5.fotos-hochladen.net/uploads/2lpdyoktws6.jpg after the animation http://img5.fotos-hochladen.net/uploads/18cd9xfjg21.jpg

이는 내 코드입니다 : HTML

<body> 
    <a href="#" id="btn_logo" onclick="return false"> <div id="animation">  
      <div id="logo"> </div> 
      <div id="up"> </div> 
      <div id="down"> </div> 
     </div></a>

다음과 애니메이션을 만들어 :

#btn_logo:active #up

및

#btn_logo:active #down

어떻게 끝난 후에 애니메이션을 전환 할 수 있습니까?

출처

2016-11-29 Marcel Schulz

당신은 애니메이션에 대한 CSS를 게재 할 수 있습니까? CSS 애니메이션 정의는 일반적으로 더 이상 지정하지 않는 한 애니메이션을 한 번 실행하는 것입니다. – SoluableNonagon

이벤트를 모니터링하려면 Javascript가 필요합니다. 이것을하기 위해 JS가 필요하기 때문에 jQuery의 animate 메소드는 자체 완료 콜백을 가지고 있기 때문에 사용할 것이다. http://api.jquery.com/animate/ – Korgrue

CSS 클래스에 애니메이션을 적용한 다음 클릭시 CSS 클래스를 추가하거나 제거하면됩니다.

과 같이 : https://jsfiddle.net/8troo8bw/1/

(또는 그렇게 정확한 HTML과) : https://jsfiddle.net/8troo8bw/2/

의 핵심은 여기에 애니메이션 인 :

#up, #down { 
    background: #000; 
    position:absolute; 
    right:0; 
    left:0; 
    width:100%; 
    height:25px; 
    transition: top 0.25s; 
} 

#up.moveUp { 
    top: 25px; 
} 
#down.moveDown { 
    top: 100px; 
}

그리고 클래스를 추가 할 수와 관계있는 JS :

$('#click').on('click', function(){ 
    $('#up').addClass('moveUp'); 
    $('#down').addClass('moveDown'); 
});

출처

2016-11-29 15:49:05 Johannes

js와 함께 많은 시간을 보내지 않았으므로 지금까지 정확히 어떻게 추가합니까? div에서 "animation"을 "up"에서 "down"으로 분리 한 다음 애니메이션의 클래스를 추가 할 수 있도록 jcl 코드와 onclick을 연결합니까? –

원하는 경우 래퍼 div를 유지할 수 있습니다. 중요하지 않습니다 .Javascript는 다른 CSS 클래스를 요소에 추가하여 CSS 애니메이션을 활성화합니다. – Johannes

@MarcelSchulz 다음은 동일한 HTML을 사용하는 예제입니다. https://jsfiddle.net/ (내 클릭만으로 8troo8bw/2/막대기를 클릭하십시오) – Johannes

$(document).ready(function(){ 
 
    $('#animation').on('click', function() { 
 
     $('.up,.down').addClass('animated'); 
 
    }); 
 
    });

#animation { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: yellow; 
 
} 
 

 
.logo { 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    height: 50px; 
 
    width: 50px; 
 
    background: red; 
 
    border-radius: 50%; 
 
    margin: 0 auto; 
 
} 
 

 
.up { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 50%; 
 
    left: 0; 
 
    background: green; 
 
} 
 

 
.down { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: blue; 
 
} 
 

 
.up.animated { 
 
    bottom: 100%; 
 
    top: -50%; 
 
    transition: all 1s linear; 
 
} 
 

 
.down.animated { 
 
    top: 100%; 
 
    bottom: -50%; 
 
    transition: all 1s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="animation">  
 
    <div class="up"> </div> 
 
    <div class="down"> </div> 
 
    <div class="logo"> </div> 
 
</div>

출처

2016-11-29 16:03:31

CSS 만들기 : 활성화 전환 :

답변

관련 문제