61419


ボタンをクリックしてダークモード化するスクリプトを作っています  
枠線もボタンクリックで変化させたいですが、これだけアニメーションの時間をなくしたい（ぱっとすぐに切り替えるアニメーション方法にしたい）です

`transition: all 1s;`の下に`transition`を書いてみましたが、アニメーション全部が上書きされてしまいます  
一つだけのアニメーションを変えることはできますか？

[code]

    $("#darkmode").on("click", function() {
      $("#message").toggleClass("alt")
    })
[/code]

[code]

    body {
      background: #000;
      padding: 20px;
    }
    
    #message {
      background: #fff;
      border-radius: 4px;
      padding: 20px;
      font-size: 25px;
      text-align: center;
      transition: all 1s;
      margin: 0 auto;
      width: 300px;
      border: 3px solid #000;
    }
    
    button {
      background: #000;
      border: none;
      border-radius: 5px;
      padding: 8px 14px;
      font-size: 15px;
      color: #fff;
    }
    
    #message.alt {
      background: #000;
      color: #fff;
      border: 3px solid #fff;
    }
    
    #message.alt button {
      background: #fff;
      color: #000;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="message">
      <p>Hello, World</p>
      <button id="darkmode">Change darkmode</button>
    </div>
[/code]


CC BY-SA 4.0
2019-12-13T12:37:38.347
61417
2019-12-13T13:22:34.517
2019-12-13T13:07:03.160
32986
37046
question
javascript css
特定のアニメーションだけ無効化したい


`transition`
プロパティは遷移を行う対象や効果を、カンマ区切りで複数指定することが出来ます[[1]](https://drafts.csswg.org/css-
transitions/#transition-shorthand-property)。そのため、 `all`
キーワードで設定した遷移効果の後に、カンマ区切りで上書きしたい遷移対象を記述すれば良いことになります。

> ### § 2.5. The transition Shorthand
> Property[[1]](https://drafts.csswg.org/css-transitions/#transition-
> shorthand-property)
>
>
> [![画像の説明をここに入力](https://i.stack.imgur.com/FYugs.png)](https://i.stack.imgur.com/FYugs.png)
[code]

    #message {
      transition: all 1s, border;
    }
    
[/code]

[code]

    $("#darkmode").on("click", function() {
      $("#message").toggleClass("alt")
    })
[/code]

[code]

    body {
      background: #000;
      padding: 20px;
    }
    
    #message {
      background: #fff;
      border-radius: 4px;
      padding: 20px;
      font-size: 25px;
      text-align: center;
      transition: all 1s, border; /* 変更 */
      margin: 0 auto;
      width: 300px;
      border: 3px solid #000;
    }
    
    button {
      background: #000;
      border: none;
      border-radius: 5px;
      padding: 8px 14px;
      font-size: 15px;
      color: #fff;
    }
    
    #message.alt {
      background: #000;
      color: #fff;
      border: 3px solid #fff;
    }
    
    #message.alt button {
      background: #fff;
      color: #000;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="message">
      <p>Hello, World</p>
      <button id="darkmode">Change darkmode</button>
    </div>
[/code]


CC BY-SA 4.0
2019-12-13T13:22:34.517
61419
2019-12-13T13:22:34.517
32986
61417
answer