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

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

###該当のソースコード
index.html

html
1<!DOCTYPE html>
2	<lang = "ja">
3	<head>
4		<link rel = "stylesheet" href = "elements.css" />
5<script type = "text/javascript" src = "anime.min.js"></script>
6<script type = "text/javascript" src = "animeElements.js"></script>
7		
8	</head>
9
10	<body>		
11		<div class = "square shadow" />
12		
13		<script type = "text/javascript">
14			var target = document.querySelector('.square');
15			target.addEventListener("mouseover",function(){ animeElements(target)},false);
16
17		</script>
18	</body>
19</html>

animeElements.js

JavaScript
1function animeElements(target){
2/* anime-min-jsを基に要素にアニメーションをつける */
3	anime({
4		targets: target,
5		scale:{
6			value: 1.1,
7			duration: 800,
8			delay: 200,
9			easing: 'linear'
10		},
11});
12}

elenemts.css

css
1.square {
2   width: 200px;
3   height: 200px;
4   background: blue;
5   
6}
7
8.shadow {
9    -webkit-transition-duration: 1s;
10	-moz-transition-duration: 1s;
11	-ie-transition-duration: 1s;
12	transition-duration: 1s;
13}
14
15.shadow:hover {
16	-webkit-filter: drop-shadow(2px 2px 4px #888);
17	-moz-filter: drop-shadow(2px 2px 4px #888);
18	-ie-filter: drop-shadow(2px 2px 4px #888);
19	filter: drop-shadow(2px 2px 4px #888);
20	
21}

###補足情報(言語/FW/ツール等のバージョンなど)
アニメ処理にはanime-jsを使用、duration処理で1秒掛けてアニメーションを行っています。

kei344

2017/04/12 08:47

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

css
1.shadow {
2    -webkit-transition-duration: 1s;
3    -moz-transition-duration: 1s;
4    -ie-transition-duration: 1s;
5    transition-duration: 1s;
6}

これを修正して、

css
1.shadow {
2    -webkit-transition: 1s -webkit-filter;
3    -moz-transition: 1s -moz-filter;
4    -ie-transition: 1s -ie-filter;
5    transition: 1s filter;
6}

にしてください。

理由

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

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

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

提案

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

css
1.square {
2	width: 200px;
3	height: 200px;
4	background: blue;
5}
6.shadow {
7	transition: 1s filter;
8}
9.shadow:hover {
10	filter: drop-shadow(2px 2px 4px #888);
11}

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

提案2

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

css
1.square {
2	width: 200px;
3	height: 200px;
4	background: blue;
5}
6.shadow {
7	transition: 1s filter, .8s .2s transform linear;
8}
9.shadow:hover {
10	filter: drop-shadow(2px 2px 4px #888);
11	transform: scale(1.1);
12}