質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.36%

  • JavaScript

    18774questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    10357questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6749questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

JavaScriptとCSSにそれぞれ書かれたduration処理を同時に行いたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 896

前提・実現したいこと

JavaScriptに1秒掛けて動くアニメーション処理を、CSSに1秒掛けてシャドウを掛ける処理を書き、それを同時に動かしたいです。

現在、JavaScriptに1秒掛けて動くアニメ処理を、CSSにマウスオーバーで1秒掛けてシャドウが掛かる処理を書き、同時に動かそうとしましたが、
「先に1秒掛けてシャドウ掛かり、もう1秒掛けてアニメーションの処理が動く」状態になってしまっています。
同時に動かす方法は無いのでしょうか。
アドバイスお願いします。

該当のソースコード

index.html

<!DOCTYPE html>
    <lang = "ja">
    <head>
        <link rel = "stylesheet" href = "elements.css" />
<script type = "text/javascript" src = "anime.min.js"></script>
<script type = "text/javascript" src = "animeElements.js"></script>

    </head>

    <body>        
        <div class = "square shadow" />

        <script type = "text/javascript">
            var target = document.querySelector('.square');
            target.addEventListener("mouseover",function(){ animeElements(target)},false);

        </script>
    </body>
</html>


animeElements.js

function animeElements(target){
/* anime-min-jsを基に要素にアニメーションをつける */
    anime({
        targets: target,
        scale:{
            value: 1.1,
            duration: 800,
            delay: 200,
            easing: 'linear'
        },
});
}

elenemts.css

.square {
   width: 200px;
   height: 200px;
   background: blue;

}

.shadow {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ie-transition-duration: 1s;
    transition-duration: 1s;
}

.shadow:hover {
    -webkit-filter: drop-shadow(2px 2px 4px #888);
    -moz-filter: drop-shadow(2px 2px 4px #888);
    -ie-filter: drop-shadow(2px 2px 4px #888);
    filter: drop-shadow(2px 2px 4px #888);

}

補足情報(言語/FW/ツール等のバージョンなど)

アニメ処理にはanime-jsを使用、duration処理で1秒掛けてアニメーションを行っています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/04/12 17:47

    コードは省略せず書かれた方が回答を得やすいと思います。

    キャンセル

回答 1

checkベストアンサー

+3

elenemts.css の transition の指定が原因です。

.shadow {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ie-transition-duration: 1s;
    transition-duration: 1s;
}

これを修正して、

.shadow {
    -webkit-transition: 1s -webkit-filter;
    -moz-transition: 1s -moz-filter;
    -ie-transition: 1s -ie-filter;
    transition: 1s filter;
}

にしてください。

 理由

transition: 1s filter; は transition-duration: 1s; transition-property: filter; のショートハンドです。
transition-property に値を指定すると、そのプロパティだけトランジション効果が適用されます。

修正前の指定方法では transition-property に値が指定されていないため、すべてのプロパティにトランジション効果が適用されます。
すると anime.js での scale のアニメーションにもトランジション効果が適用されるので、anime.js でのアニメーションに加えてトランジション効果が加わるため、おかしなことになって動作が遅れます。

なので修正後のように、transition-property: filter; を指定してやればオーケーです。

 提案

transition にはベンダープレフィックスはほぼ必要ないので、もっとシンプルに書いてはどうですか?

.square {
    width: 200px;
    height: 200px;
    background: blue;
}
.shadow {
    transition: 1s filter;
}
.shadow:hover {
    filter: drop-shadow(2px 2px 4px #888);
}

Can I use... CSS3 Transitions
(付けるにしても -webkit- だけで十二分です。-ie-というプレフィックスは存在しないと思います。)

 提案2

scale を操作する程度なら anime.js を使わなくとも transition で代用できます。

.square {
    width: 200px;
    height: 200px;
    background: blue;
}
.shadow {
    transition: 1s filter, .8s .2s transform linear;
}
.shadow:hover {
    filter: drop-shadow(2px 2px 4px #888);
    transform: scale(1.1);
}

(-webkit- を指定していいかもしれません。)

 質問とは関係ないけど修正したほうがいいところ

  • <lang = "ja"> → <html lang="ja">
  • <div class = "square shadow" /> → <div class="square shadow"></div>
  • = の前後はスペースを入れず、type="text/javascript" のように書く

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/13 14:37

    有難うございました、無事に同時に動かすことが出来ました。
    文法の修正点もとても参考になりました。
    色々なサイトを基に見様見真似でコードを書いていたので適切な文法を知る事が出来て良かったです。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    18774questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    10357questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6749questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。