問題タブ [css-calc]

計算式内で n 変数を使用できますか?

例えば：

私のコード:

CSS (サス):

Javascript (JQuery):

私は基本的に、メニューに動的なオープニング効果を達成しようとしているので、要素を追加または削除しても機能します (各 div の左を個別に設定したときとは異なります)。

ページの右から中央に向かってアニメーション化されたボタンがあります。

FF と Opera ではうまく機能します。Safari では、ページの中央に移動してから、横にジャンプします。

ボタンには位置があります

次に、宛先でアニメーション化されます。

フォールバックを取得し、-webkit を取得しましたが、それでもジャンプして元に戻ります

ここで何が問題なのか本当にわかりません..ボタンには位置right:35pxの.class1があります....クリックすると、クラスがcalc-positionで.class2に変更されます。したがって、cssには右から35pxについて何もありません...私は混乱しています..

編集：

EDIT2: これは瞬間的なコードです。私が言ったように、FFではOperaは本来あるべきように機能します。Safari 9 以降では、目的地に移動してから、右側のどこかにジャンプして戻ります。私は障害を見つけることができません。FFとOでも、さらに壊れたjqueryで試してみました..

なぜこれが起こっているのですか？div が適切に整列しない理由を説明できる人が必要ですか?

HTML と CSS:

https://jsfiddle.net/6xuvr6vw/1/

ご覧のとおり、.ruler-unitは に含まれていません.horizontal-ruler。

私はCSSプロパティを扱ってきましたが、calc()それについて1つの疑問があります:

差し引こうとしているコードでわかるように、レスポンシブ モード用100%のナビゲーションWIDTHですremが、明らかに機能しません。これを行う方法はありますか?

マイクロクラスを介して数値を指定するための CSS フレームワークをテストしています。たとえば、次のようなもの<div class="fifty percent wide">は に変換される場合がありますwidth: 50%。実装では、CSS 変数 (カスタム プロパティ) を使用します。

次の CSS を検討してください。

それはすべて問題なく、うまく機能します。問題は、テスト スイートを作成して、その結果が のカスタム プロパティのfifty percent値になることを確認することです。残念ながら、の値を調べるために使用すると、(未解決、未計算の) "calc" 文字列全体が表示されます。の値を調べると、「512px」などの解決済みの値が得られます。--percent50%getComputedStyle--percentwidth

カスタムCSSプロパティの解決された計算値をプログラムで取得して検証する方法はありますか? それとも、「計算」式の評価を強制する API ですか?

calc()JavaScript で位置を設定するときに css 関数を使用できますか?