問題タブ [svelte-3]

残念ながら、ロールアップ ドキュメントには何も見つかりませんでした。Svelte とロールアップを使用して Web サイトを構築しており、運用、テスト、および開発用にさまざまな環境変数が必要です。

これは、私の package.json のスクリプト セクションです。

autobuild または testbuild コマンドのいずれかで start:dev コマンドを使用する方法がわかりません。どういうわけか、すべてのスクリプトを削除しても、環境変数は常に devbuild スクリプトのものです。これらの変数も別の場所で指定されていますか? 私はこれを試しました：

この：

しかし、何も機能していないようです。ここで何が表示されないのですか? sirv に関する実際のドキュメントはありますか? -h フラグを介して一部の情報をスクレイピングすることしかできませんでした。

私は Svelte が大好きですが、基本的なもの (表面的なものにすぎません) にこだわっています。次のコードは 2 つの要素間をスムーズに遷移するはずですが、代わりに「ジャンプ」します。つまり、到着する前に着信要素のためのスペースを作っているようです。

この問題は、Rich Harris が数年前に指摘したものと似ていますが、解決策が実装されたようには見えません。Svelte チュートリアル サイトのすべての例は、単一の要素のみを移行します。

基本的なマークアップ/コードは次のとおりです。

Vue での同等の機能は次のようになります。

コード サンドボックスの例を次に示します。ボタンが下にジャンプして、新しい要素のためのスペースを空けることがわかります。400 の持続時間に等しい「イン」トランジション遅延を追加しました (これがデフォルトであることはわかっていますが、わかりやすくするために明示的に設定したかったのです)。遅延は、最初のリンク (Harris が「遅延のハッキーな使用」と呼んだもの) に記載されているように、最初の要素が次の要素を移行する前に移行できるようにする必要があります。

また、outro'd される要素を position: absolute に明示的に設定して、スペースを占有しないようにしました。以下は (まだ正しく動作していない) 例です。機能していたとしても、少しエレガントではないようです。何らかの理由で、トランジションが position:absolute を設定するクラスの設定をオーバーライドしています。

どんな助けでも大歓迎です！

更新:このコードで目的の効果が得られました。ここで行ったのは、Svelte のフライ トランジションをコピーして変更し、追加のパラメーター (「位置」) を取得することでした。これは、「絶対」または「相対」など、必要に応じて設定できます。奇妙な副作用 (コンテナを position: relative に設定し、各要素の幅を 100% に設定してサイズが変わらないようにする) がないように、CSS を微調整します。これは機能しますが、Svelte のトランジションを変更せずに、労働集約的ではない方法が必要であると私は感じています。