JavaScript를 사용하지 않으면 CSS 전환을 사용할 수있는 경우에만 사용할 수 있습니다. 그리고 이것들은 꽤 인상적이지만, 조건 애니메이션과 관련해서는 아직 발견하지 못했습니다. 기본적으로 시작 지점에서 다른 지점으로 이동 한 다음 다시 돌아올 수 있습니다 (브라우저 자체에서 사용할 수있는 기본 브라우저 이벤트를 기반으로). JS를 사용하면 추가 클래스를 추가/제거하고 div 요소를 마음 속으로 옮길 수 있습니다. 'just'CSS가 아니다. (나는 이것에 대해서 틀리게 입증되고 싶다.)
내가 지금까지 가지고 올 수있었습니다 최고입니다 :
#left {
float:left;
width:200px;
}
.right {
height: 0;
background-color: #fff;
margin-left: 205px;
overflow: hidden;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
.right:target {
display: block;
height: 5em;
background-color: #ffa;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
그리고 요소의 너비가 변경 될 때 발생하는 콘텐츠 리플 로우를 고려하면 모양이 좋지 않으므로 측면에서 벗어나지 않습니다 (원할 경우 가능).
내가 어떤 자바 스크립트
없이하고자하는 경우 인 그건 ... : 나는 원래의 질문의 일부를 잘못 해석했을 수 있습니다 생각하기 때문에
는을 편집 , 그리고 주석 (아래)은 jQuery가 괜찮은 옵션임을 암시하는 것처럼 보입니다. 이것은 데모로서 보람있는 것일 수 있습니다 :
$('#left a').click(
function(){
var div = $('div').not('#left').eq($(this).index('#left a'));
var others = $('div[data-visible="true"]');
others.each(
function(){
$(this).animate({
'left' : '2000px'
},1000,function(){
$(this).removeAttr('style data-visible');
});
});
if (div.attr('data-visible')) {
div.animate({
'left' : '2000px'
},1000,function(){
$(this).removeAttr('style data-visible');
});
}
else {
div.animate({
'left' : '210px'
},1000).attr('data-visible',true);
}
});
JS Fiddle demo.
참고 :
첫 번째 바이올린은 옳습니다. 당신이 제안한대로 스크립트를 추가하기 전에 내 CSS를 만들어야합니다. 이것은 방금 내 인생을 훨씬 쉽게 만들어주었습니다. 정말 고마워요! : D –
당신이하고 싶은 일에 대해 생각하고 필요하다면 바로 시작할 수 있도록 CSS에 요소를 배치하십시오. – sg3s
여기에 내가 지금까지 CSS를 현명하게 가지고있는 바이올린이 있습니다. http://jsfiddle.net/bridget_kilgallon/sMDyB/4/ 바이올린은 잘 작동하지만 전환은 드림위버에서 작동하지 않습니다. 어떤 아이디어입니까? 다시 한 번 감사드립니다 -BK –