svg 이미지로 CSS 전환은 한 방향으로 만 작동합니다.

현재 CSS 전환에 문제가있는 웹 사이트를 개발 중입니다.svg 이미지로 CSS 전환은 한 방향으로 만 작동합니다.

해당 웹 사이트에는 왼쪽에 로고가있는 헤더가 있습니다. 머리글을 아래로 스크롤하면 로고가 축소됩니다. 이것은 특정 양의 픽셀을 스크롤 할 때 클래스에 .smaller 클래스를 추가 할 때마다 작동합니다.

지금 문제 : 헤더를 멋지게 축소했지만 로고 크기가 변경되고 애니메이션 크기가 축소되지 않습니다. 반대로 위로 스크롤하면 .smaller 클래스가 제거되면 로고가 멋지게 확대되고 애니메이션이 적용됩니다.

현재 문제를 그릴 수 : https://callcenteroptimal.dev.itsmind.com/

HTML 코드

<header> 
    <div class="outer-container"> 
     <div class="width-3-logo"> 
      <img src="images/callcenter-optimal-logo.svg" alt="Callcenter Optimal Logo" /> 
     </div> 
     <nav class="width-9-menu"> 
      <input type="checkbox" id="nav" class="hidden" /> 
      <label for="nav" class="nav-open"><i></i><i></i><i></i></label> 
      <div class="nav-container"> 
       <ul> 
        <li><a href="">Links...</a></li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
</header>

관련 SASS 코드

header { 
    position: fixed; 
    width: 100%; 
    z-index: 999; 
    height: 82px; 
    background: #fff; 
    transition: height 0.5s; 

    img { max-height: 64px; width: 99px; margin: 9px 0 0 9px; transition: height 1s ease, width 1s ease; } 

    @include grid-media($large-screen-up) { 
     img { max-height: 136px; width: 205px; margin-top: 0.9em; } 
    } 

    &.smaller { 
     height: 65px; 
     img { height: 46px; width: 72px; } 
     .nav-open { 
      top: 10px; 
     } 
     @include grid-media($large-screen-up) { 
      img { height: 75px; width: 116px; transition: height 1s ease, width 1s ease; } 
      nav { 
       ul { 
        li { line-height: 65px; } 
       } 
      } 
     } 
    } 
}

나는 문제가 사실 함께 할 수있는 뭔가가 생각 나는 svg를 사용하고있다. 그러나 나는 그것을 어떻게 고칠 수 있을지 짐작하지 못했다.

감사합니다.

출처

2017-12-27 im-fabian

해결 방법 : 최대 높이를 설정했는데 높이를 설정해야합니다. 전후 상태 모두에서 설정되지 않은 것은 애니메이션이 될 수 없기 때문입니다. 그리고 더 나아가 : 높이까지의 최대 높이는 움직일 수 없습니다.

출처

2017-12-27 20:16:58

svg 이미지로 CSS 전환은 한 방향으로 만 작동합니다.

답변

관련 문제