0
我目前正在開發一個網站,我有一個問題與CSS過渡。css過渡與svg圖像只能作用一種方式
在該網站上,左側有一個帶有徽標的標題。當您向下滾動頁眉並且徽標縮小時。當您向下滾動特定數量的像素時,這可以在整個頁面中添加.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 CODE
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。但我還沒有猜到我可以如何解決這個問題。
感謝任何幫助!