web-dev-qa-db-ja.com

クラスが削除されたときのCSS遷移

設定ページとして機能するフォームがあります。フォーム要素が変更されると、それらはunsavedとしてマークされ、異なる境界線色を持ちます。フォームを保存すると、別の境界線の色が付けられて保存済みとしてマークされます。

私が欲しいのは、フォームが保存されると、境界線が徐々にフェードアウトすることです。

順序は次のとおりです。

<input type='text' class='unsaved' /> Not saved yet, border is yellow
<input type='text' class='saved' />   Saved, so the border is green
<input type='text' class='' />        Fade out if coming from class saved

クラスsavedが削除されたときにCSS3トランジションを起動できる場合、それはフェードアウトし、すべてがおかしくなります。現在、私は（もちろんプラグインを使用して）手動でアニメーション化する必要がありますが、途切れ途切れに見えるため、CSS3にコードを移動してよりスムーズにしたいと思います。

これは、ChromeおよびFirefox 4+で動作するためにのみ必要ですが、他の人はいいでしょう。

CSS：

関連するCSSは次のとおりです。

.unsaved {
    border: 3px solid #FFA500;
    padding: 0;
}
.saved {
    border: 3px solid #0F0;
    padding: 0;
}

私は次の移行（またはそれに似たもの）で働きたいです：

border-color: rgba(0,0,0,0);
-webkit-transition: border-color .25s ease-in;  
-moz-transition: border-color .25s ease-in;  
-o-transition: border-color .25s ease-in;  
transition: border-color .25s ease-in;

注：

個人的には、このユーザーインタラクションのスキームには同意しませんが、それがソフトウェアリーダーが望んでいる方法です。現在の機能を変更することを提案しないでください。ありがとう！

csscss3css-transitions
68
beatgammit

CSS遷移は、CSSを使用してオブジェクトの2つの状態を定義することにより機能します。あなたのケースでは、クラスが"saved"の場合のオブジェクトの外観を定義し、クラス"saved"がない場合の外観を定義します（通常の外観です）。クラス"saved"を削除すると、"saved"クラスのないオブジェクトの所定の遷移設定に従って、他の状態に遷移します。

CSSトランジション設定がオブジェクトに適用される場合（"saved"クラスなし）、それらは両方のトランジションに適用されます。

提供しているHTMLで使用している関連するすべてのCSSを含めた場合、より具体的に支援できます。

HTMLを見ると、移行CSS設定は.savedにのみ適用されるため、削除した場合、CSS設定を指定するコントロールはありません。常にオブジェクトに残す別のクラス".fade"を追加し、そのクラスでCSS遷移設定を指定して常に有効にすることができます。

60
jfriend00

@ jfriend00の答えは、removeクラスのみ（addではなく）をアニメーション化する手法を理解するのに役立ちます。

「ベース」クラスには、transitionプロパティ（transition: 2s linear all;など）が必要です。これにより、この要素で他のクラスが追加または削除されたときにアニメーションが有効になります。ただし、他のクラスが追加されたときにアニメーションを無効にするには（およびアニメーションクラスの削除のみ）、2番目のクラスにtransition: none;を追加する必要があります。

例

CSS：

.issue {
  background-color: lightblue;
  transition: 2s linear all;
}

.recently-updated {
  background-color: yellow;
  transition: none;
}

HTML：

<div class="issue" onclick="addClass()">click me</div>

JS（クラスを追加するためにのみ必要）：

var timeout = null;

function addClass() {
  $('.issue').addClass('recently-updated');
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  timeout = setTimeout(function () {
    $('.issue').removeClass('recently-updated');
  }, 1000);
}

plunker この例の。

このコードでは、recently-updatedクラスの削除のみがアニメーション化されます。

20
Ruslan Stelmachenko

基本的に次のようにcssを設定します。

element {
  border: 1px solid #fff;      
  transition: border .5s linear;
}

element.saved {
  border: 1px solid transparent;
}
12
Ken Wheeler

私の場合、不透明度の遷移に問題があったので、これを修正します：

#dropdown {
    transition:.6s opacity;
}
#dropdown.ns {
    opacity:0;
    transition:.6s all;
}
#dropdown.fade {
    opacity:1;
}

マウス入力

$('#dropdown').removeClass('ns').addClass('fade');

マウス休暇

$('#dropdown').addClass('ns').removeClass('fade');
1
user956584