2

ここに私のcssがあります

#Slide {
    background: none;
    height: 30px;
    width: 140px;
}
#Slide.Selected {
    background: #ff0;
}

Selectedにクラスを追加/削除するたびに#Slide、左からワイプイン/右にワイプアウトすることで background-color プロパティがアニメーション化されるようにします。通常、背景色は表示されては消えます。css クラスを使用しているときにこれができない場合、jquery.animate()関数を使用することで可能ですか? またはcss3transitionプロパティである可能性がありますか？

誰か提案があれば

4

3 に答える 3

3

jQuery または CSS3 アニメーションを使用して、背景色でワイプ アニメーションを実行することはできません。

この視覚効果を得るには、いくつかのオプションがあります。背景をシミュレートするように、既存の要素の背後に配置された個別の要素全体でワイプ トランジションを実行できます。または、目的の色とサイズの背景画像を使用し、背景の位置をアニメートしてワイプをシミュレートすることもできます。

于 2011-11-25T15:19:29.547 に答える
1

これが私が行ったwipe_left関数です。私が自分の答えを探していたときにあなたの質問を見ました:

wipe_left($('.wipe-left'), $('.wipe-left').css('width'));

function wipe_left (elem, width) {
        elem.css('width', '0px');
        elem.css("left", width);
        elem.animate({
            width: width,
            left: '0px'
        }, 5000);
    }

<div class="wipe-left" style="position: relative; top: 0; left: 0; background-color: lightblue; width: 300px; height: 200px;">
        &nbsp;
</div>

フィドルはこちら: http://jsfiddle.net/LostInDaJungle/da16gx9n/1/

于 2014-11-07T16:22:51.180 に答える
0

CSS 疑似要素とトランジションを使用して、スムーズなバックグラウンド ワイプ効果を作成できます。

まず、バックグラウンド疑似要素をメイン コンテナーに挿入します。次に、コンテナにクラスが追加されたら、変換を使用してその背景を邪魔にならないように移動します。

#slide:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transition: transform 1s ease-in-out;
  background: teal;
}

#slide.on:before {
  transform: translateX(100%);
}


$("#slide").on("click", function() {
  $(this).toggleClass("on");
});
#slide {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 100px;
  background: salmon;
}

#slide .contents {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#slide:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  transition: transform 1s ease-in-out;
  background: teal;
}

#slide.on:before {
  transform: translateX(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slide">
  <div class="contents">Click me!</div>
</div>

いくつかの小さな考慮事項:

  • コンテナのルールには と が含まれている必要がoverflow: hiddenありposition: relativeます。
  • 疑似要素は配置されていないコンテンツ ノードの上にスタックされるため、コンテナの可視コンテンツは 2 番目のブロック要素でラップする必要があります。

Codepen での例

于 2017-11-22T02:19:24.800 に答える