ＪＳについて

解決済

質問者：9うい9p
質問日時：2021/10/06 09:38
回答数：2件

jsで要素のアニメーションの制作をしました。
１、cssが left: calc(100% - 100px);ではないと動かなくなるのはなぜでしょうか？
※right:0;とかでは動かなくなる。
2，ボタンの onclick="clickTest()ではなくjsにdocument.getElementById("").onclick = function() {
と書いたら動かなくなるのはなぜですか？

以下コード

<style>
#anime_test{
height: 100px;
width: 100px;
background-color: #F44336;
position: relative;
left: 0;
transition: 3s;
}
#anime_test.act {
background-color: #2196F3;
left: calc(100% - 100px);
}

#anime_test-btn {
margin-top: 10px;
display: inline-block;
padding: 5px 10px;
border: solid 1px;
cursor: pointer;
}

</style>
<body>
<div id="anime_test">
</div>
<div id="anime_test-btn" onclick="clickTest();">
ボタン
</div>

<script>
document.getElementById("anime_test-btn").onclick = function() {
function clickTest() {
target = document.getElementById("anime_test");
if (target.className == null || target.className=="") {
target.className = "act";
} else {
target.className = "";
}}
};
</script>

本来のコードでは
document.getElementById("button").onclick = function() {
はないもので動いていました。

ありがとうございます。
正常に動きました。

ボタンをクリックすると要素が端から端に移動し色が赤から青になるのですが
中盤は紫になっています。
ブラウザの仕様でしょうか？

No.1の回答に寄せられた補足コメントです。補足日時：2021/10/06 16:44
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2021/10/06 17:04

No1です。

＞色が赤から青になるのですが中盤は紫になっています。
＞ブラウザの仕様でしょうか？
普通に色相環で考えれば、赤と青の中間は紫です。
ですので、特に「ブラウザの仕様」というほどの特殊な話ではないと思いますけれど？
CSSアニメーションの属性値の変化は、基本的に連続値として変化させるものです。
（その点では、色はサイズや寸法などとは異なるので、少々特殊と言えますけれど）

中間の色をいろいろとコントロールしたければ、@keyframesを利用することで可能です。
また、RGBではなくHSLで変化させれば、また別の印象にもなることでしょう。
https://developer.mozilla.org/ja/docs/Web/CSS/@k …
https://developer.mozilla.org/ja/docs/Web/CSS/CS …

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。

通報する

お礼日時：2021/10/06 19:14

No.1

回答者： fujillin
回答日時：2021/10/06 11:29

こんにちは

いろいろ問題点がありますね。

1.
position:relativeで指定しているので、初期表示状態は right:0 と同等です。
　それを、right:0 までアニメーションしても、変化はないので移動はしません。
　初期状態を right:0 として、.act の方を right: calc(100px - 100% ) などとしておけば、left の場合と同様の動きになります。

2.
element.onclick = function() {～～
を実行すると、HTMLのタグ内に記された " onclick="clickTest();" が、function{～～} で上書きされます。
一方で、ご提示の function 内では関数の定義（＝clickTest）しか行っていないので、ボタンを押すたびに、関数定義が繰り返されるだけで、実質的には何も実行されません。

ご提示のような記述方法で動作させたいのなら、
document.getElementById('anime_test-btn').onclick = function() {
document.getElementById('anime_test').classList.toggle('act');
};
などの記述に変えれば、動作するものと考えられます。

なお、この場合にはHTMLタグ内の記述は不要です。
（どうせ上書きされてしまうので、意味がない。）