當使用計算公式時，不在IE9-11中進行動畫轉換

我試圖讓IE10在元素的寬度上進行動畫變化，以便將另一個面板移開。我有一個JSBin展示了基本的想法。在Chrome上，當您點擊打開和關閉鏈接時，它的動畫效果就很好。然而，在IE10中，它只是跳到打開和關閉。我想我有所有必要的前綴 - 任何人都知道爲什麼它不是動畫？當使用計算公式時，不在IE9-11中進行動畫轉換

更新：嘗試給開放和關閉狀態的右側顯式像素值。動畫很好。 甩頭拳頭百分比....

更新2：顯然％至 - ％的作品一樣，PX對PX和％-to-PX，和PX-TO-％，但％至 - 無論計算失敗

更新3：發現this bug在連接，這似乎正是描述這個問題（除了使用關鍵幀動畫，而不是過渡）。狀態：「已解決爲推遲」。該死的，IE。

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <section id="body-container"> 
     <div id="left"> 
     <div id="nav"> 
      <h1>Nav</h1> 

      <a href="#right"> 
      Close 
      </a> 
      <a href="#"> 
      Open 
      </a> 
     </div> 
     <div id="left-content"> 
      LEFT 
     </div> 
     </div> 
     <div id="right"> 
     RIGHT 
     </div> 
    </section> 
</body> 
</html>

減：

@nav-width: 54px; 

html, body { 
    width: 100%; 
    height: 100%; 
} 

#body-container { 
    display: -ms-flexbox; 
    display: flex; 
    width: 100%; 
    height: 100%; 

    #left, 
    #right { 
    height: 100%; 
    } 

    #left { 
    -ms-flex: 1; 
    flex: 1; 
    display: -ms-flexbox; 
    display: flex; 
    background-color: red; 

    #nav { 
     width: @nav-width; 
     height: 100%; 
     background-color: yellow; 
    } 

    #left-content { 
     -ms-flex: 1; 
     flex: 1; 
     background-color: orange; 
    } 
    } 

    #right { 
    width: 66%; 
    background-color: blue; 
    position: relative; 
    -ms-transition: width 0.5s linear; 
    transition: width 0.5s linear; 

    &:target { 
     width: calc(~'100% - @{nav-width}'); 
    } 
    } 
}

簡單的例子，顯示與calc其他堆棧溢出用戶提供的問題：

來源

2013-11-04 Turner Hayes

你爲什麼裏面的其他規則的嵌套規則？ – matewka

爲什麼不呢？這並不意味着生產代碼，我知道嵌套#id規則是多餘的，我只是在展示問題。 –

我只注意到你正在使用LESS。你能添加適當的標籤嗎？ – matewka

沒有計算在創造這個例子

測試和IE11，Chrome和Firefox的工作受傷。

導航欄被帶到#left容器的外部。現在我們有#nav,#left和#right
導航給出flex: 0 0 54px。它不會從其默認值54px增長或縮小。
#right給出width: 66%
選擇後#right給出width: 100%佔用柔性容器內的空間的全部量。 #left被擠出並被隱藏，並且導航保持放置狀態，因爲它已被告知不縮小。
上#left的overflow: hidden阻止其內容從給出min-width: 0沿着其flex: 1在IE11
#left傾泄而出，這保證了它可以被隱藏（柔性項默認min-width在最新版的Firefox版本不同的處理方式）

完整的例子

該實施例與由香草CSS。

此例給出了柔性容器的高度爲height: 100vh。如果需要，這可以更改爲height: 100%。

body { 
 
    margin: 0; 
 
} 
 
#body-container { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 
#nav { 
 
    flex: 0 0 54px; 
 
    background-color: yellow; 
 
} 
 
#left { 
 
    flex: 1; 
 
    background-color: orange; 
 
    min-width: 0; 
 
    overflow: hidden; 
 
} 
 
#right { 
 
    background-color: blue; 
 
    transition: width 0.5s linear; 
 
    width: 66%; 
 
} 
 
#right:target { 
 
    width: 100%; 
 
}

<section id="body-container"> 
 
    <div id="nav"> 
 
    <h1>Nav</h1> 
 
    <a href="#right">Close</a> 
 
    <a href="#">Open</a> 
 
    </div> 
 
    
 
    <div id="left"> 
 
    LEFT 
 
    </div> 
 
    
 
    <div id="right"> 
 
    RIGHT 
 
    </div> 
 
</section>

來源

2015-01-08 08:23:04 misterManSam

我在IE11中試過這個，看到沒有過渡效果。它對你有用嗎？ – Anonymous

@匿名 - 你是對的！我沒有機會在IE11中測試。它似乎不想過渡flex屬性。我做了一些改變，現在寬度已經過渡（需要** no ** calc）;它**現在在IE11 ** :) :) – misterManSam

燁，這似乎工作。討厭IE如何解決這個問題這麼久。 – Anonymous

這裏是最大寬度解決方法：

.test { 
    background: #990000; 
    width: 200px; 
    height: 200px; 
    transition: width 0.5s linear; 
    max-width: calc(100% - 54px); 
} 
.test.alt { 
    width:100%; 
    max-width: calc(100% - 54px); 
}

jsfiddle

來源

2016-12-15 21:16:16 kloshar4o

當使用計算公式時，不在IE9-11中進行動畫轉換

回答

沒有計算在創造這個例子

完整的例子

相關問題