부트 스트랩 두 개의 열 애니메이션 플리커가 수정되었습니다.

부트 스트랩 그리드가 2 개 있습니다. 전체 jsfiddle code here.부트 스트랩 두 개의 열 애니메이션 플리커가 수정되었습니다.

애니메이션의 문제점은이 코드를 사용하여 적용 :

CSS :

.row-fluid div { 
    -webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    -moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    -o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
}

왼쪽 열 토글/나타내는 우측 열은 점멸과 하단으로부터 팝 왼쪽 컬럼 동안 외에 상단 스트레칭.

이 CSS를 사용 중지하면 애니메이션이없고 프로세스가 빠르게 전환됨에 따라 프로세스가 감지되지 않습니다.

열을 표시하지 않고 애니메이션을 추가하는 방법은 깜박입니다.

전체 코드 :

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Examples for bootstrap-slider plugin"> 
    <meta name="author" content=""> 

     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

    </head> 

    <body> 

<style> 

.row-fluid div { 
    -webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    -moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    -o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
} 

#col1 { 
    background-color: #A6BFBA; 
} 

#col2 { 
    background-color: #DE4124; 
} 

#trig { 
    margin: 50px; 
} 

.row-fluid .col-0 + [class*="col"]{ 
    margin-left: 0; 
} 

@media all and (max-width:768px) { 
    .col-0 { 
     width:0; 
     padding:0; 
     overflow:hidden; 
     float:left; 
     display:none; 
    } 
} 
</style> 

<div class="container-fluid"> 
<div class="row-fluid"> 

    <div id="col1" class="col-xs-3 col-md-3"> 
     Left Column text here<br/> 
     Left Column text here<br/> 
     Left Column text here<br/> 
     Left Column text here<br/> 
     Left Column text here<br/> 
     Left Column text here<br/> 
     Left Column text here<br/> 
     Left Column text here<br/> 
     Left Column text here<br/> 
     Left Column text here<br/> 
     Left Column text here<br/> 
    </div> 

    <div id="col2" class="col-xs-9 col-sm-9"> 
     <a id="trig" class="btn btn-primary visible-xs">Reflow Me</a><br/> 
     Right Column text here<br/> 
     Right Column text here<br/> 
     Right Column text here<br/> 
    </div> 

    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#trig').on('click', function() { 
      $('#col1').toggleClass('col-0'); 
      $('#col2').toggleClass('col-xs-12 col-xs-9'); 
     }); 
    }); 
</script> 

    </body> 
</html>

출처

2015-01-08 daliaessam

애니메이션 부드럽게하기 위해이

죄송합니다, 작은 수정을 시도 :

fiddle code - live example

CSS :

.row-fluid { 
    overflow:hidden; 
} 

.row-fluid div { 
    -webkit-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    -moz-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    -o-transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
    transition: width 0.3s ease, margin 0.3s ease, padding 0.3s ease; 
} 

#col1 { 
    background-color: #A6BFBA; 
} 

#col2 { 
    background-color: #DE4124; 
} 

#trig { 
    margin: 50px; 
} 

.row-fluid .col-0 + [class*="col"]{ 
    margin-left: 0; 
} 

.offcanvas { 
    margin-left:0; 
} 

@media all and (max-width:768px) { 
    .col-0 { 
     width:0; 
     padding:0; 
     overflow:hidden; 
     float:left; 
     display:none; 
    } 
    .offcanvas { 
     margin-left:-25%; 
    } 
}

jQuery를 :

$(document).ready(function() { 
    $('#trig').on('click', function() { 
     $('#col1').toggleClass('offcanvas'); 
     $('#col2').toggleClass('col-xs-12 col-xs-9'); 
    }); 
});

UPDATE :

@media all and (max-width:768px) { 
    .col-0 { 
    width:0; 
    padding:0; 
    overflow:hidden; 
    float:left; 
    display:none; 
    } 
    .offcanvas { 
    margin-left:-25%; 
    height:0px; 
    opacity:0; 
    } 
}

업데이트 # 2

당신도이 코드 사이드 바의 높이 & 불투명도 변화를 애니메이션을 적용 할 경우 :

.row-fluid div { 
    -webkit-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease; 
    -moz-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease; 
    -o-transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease; 
    transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease, opacity 0.3s ease; 

}

출처

2015-01-08 02:26:45 Darko

문제 왼쪽 열이 오른쪽 열을 숨 깁니다. 여전히 아래쪽에 공백이 있습니다. 왼쪽 열은 원래 더 크다. 내가 생각하는 돔에서 제거해야한다. – daliaessam

왼쪽 열이 숨겨져있을 때, 오른쪽 열이 여전히 같은 높이를 가지고있을 때, 내가 의미하는 바를 알기를 바랍니다. – daliaessam

OK, css가 업데이트되었습니다. 지금은 바이올린을 확인하십시오 – Darko

부트 스트랩 두 개의 열 애니메이션 플리커가 수정되었습니다.

답변

관련 문제