숨겨진 요소 표시 및 애니메이션 적용

.button이 숨겨진 후 form 오른쪽에서 왼쪽으로 애니메이션을 숨길 수있게하려면 어떻게해야합니까? 그렇게 할 수는 있지만 애니메이션을 동기화 할 수는 없습니다.
button을 클릭하면 일부 픽셀 옆에서 오른쪽으로 이동 한 다음 숨겨지기 전에 숨기기 전에 form에 애니메이션을 적용하려고합니다.숨겨진 요소 표시 및 애니메이션 적용

양식이 .button 클래스 내부에 있었던 것과 같은 효과를 어떻게 만들 수 있습니까?

매우 도움이 되었습니까? fiddle link

출처

2016-08-11 Teuta Koraqi

이 당신의 해결책이 될 수 http://stackoverflow.com/questions/521291/jquery-slide-left-and-show – mayk

이 참조 https://jsfiddle.net/KFmLv/6436/ –

$('a.button').click(function() { 
 
    $(this).addClass('hidden-btn'); 
 
    $('.myform').fadeIn('slow'); 
 
    $('.myform input').focus(); 
 
    });

.wrapper { 
 
    overflow: hidden; 
 
    height: 200px; 
 
} 
 
.button { 
 
    font-size: 18px; 
 
    background-color: lightblue; 
 
    width: 222px; 
 
    text-align: center; 
 
    height: 44px; 
 
    line-height: 40px; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
    font-weight: 700; 
 
    margin-top: 100px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    position: relative; 
 
    transition: all 0.4s 
 
} 
 
.hidden-btn { 
 
    left: 200%; 
 
} 
 
.myform { 
 
    float: left; 
 
    position: relative; 
 
    margin-top: 100px; 
 
    display: none; 
 
    left: 50%; 
 
    top: -145px; 
 
    transform: translateX(-50%); 
 
} 
 
.myform input { 
 
    float: left; 
 
    width: 284px; 
 
    height: 40px; 
 
    padding-left: 63px; 
 
    padding-right: 5px; 
 
    margin-top: 1px; 
 
    border: none; 
 
    color: #767676; 
 
    font-size: 13px; 
 
    background-color: lighgrey; 
 
} 
 
.myform button { 
 
    width: 170px; 
 
    height: 44px; 
 
    border: 0; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    background-color: lighblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <a href="#" class="button">Test</a> 
 
    <form class="myform" action=""> 
 
    <input type="text" placeholder="Email"> 
 
    <button type="submit">try</button> 
 
    </form> 
 
</div>

출처

2016-08-11 13:19:09 rafaelcastrocouto

답장을 보내 주셔서 감사합니다! 하지만 버튼 숨김이 클릭시 숨겨져있을 때 숨겨진 요소 애니메이션이 같은 위치에서 시작해야합니다. –

그들은 동일한 위치를 가지므로 응답을 업데이트했습니다. '.myform {top : -145px;}'속성을 조정했습니다. – rafaelcastrocouto

우리가 CSS3 애니메이션을 사용이 예에서이 fiddle 갱신 시도 : 여기

는 바이올린입니다.

출처

2016-08-11 13:03:12 Singh87

숨겨진 요소 표시 및 애니메이션 적용

답변

관련 문제