Q&A
yambejp 様
ご回答有難う御座います。
やはり孫要素の除外は難しいですかね。
.columns下には、別ファイルに記述している要素をloadしています。
わかりにくくても申し訳有りません。
お世話になります。
HTMLは下記のような構造になっており、
containerクラス下をまとめてアニメーションさせたいのですが、
その中でcolumnsクラスのみ、アニメーション対象から除外したいと思っています。
どのように指定すればよいのか、ご教授頂けますと幸いです。
宜しくお願いいたします。
HTML
1<body> 2 <div class="container"> 3 <p class="left-text clearfix">hogehoge</p> 4 <p class="right-text clearfix">hogehoge</p> 5 <img class="character" alt="hogehoge" src="../../hogehoge/hogehoge/hogehoge.png"> 6 <div class="board"> 7 <div class="columns"> 8 </div> 9 </div> 10 <div class="actions"> 11 <button id="prev" class="action clearfix animation-trigger"></button> 12 <button id="center" class="action clearfix animation-trigger"></button> 13 <button id="flw" class="action clearfix animation-trigger"></button> 14 </div> 15 </div> 16</body>
jQuery
1$(document).on("click", ".animation-trigger", function () { 2 $('.container').animate( { opacity: 2 }, { 3 duration: 450, easing: "swing", 4 step: function (now) { 5 $(this).css({ transform: 'rotateX(' + now * 375 + 'deg)' }) 6 } 7 }); 8});
回答3件
0
JavaScript
1 var val = Math.cos(now * 375 * (Math.PI / 180)); 2 $('.columns').css({ transform: 'scaleY(' + (1 / val).toString() + ')' });
このようにしても位置ずれを考慮しなくてはいけないし、ゼロ割もありうる？かもしれないしでうまくいきません。
container外に置いて重ねたほうがいいのでは？
投稿2018/11/12 07:14
総合スコア13749
0
.containerの直下に.columnsがないのでそこだけ除外するのは難しいと思いますよ
（しかも例示の該当箇所が空なので除外する意味がわからない）
投稿2018/11/12 06:40
総合スコア117696
イメージ的には適用する要素だけwrapして処理かなぁと
孫要素や、途中のものは厳しいですね
yambejp 様
コメント有難う御座います。
作業量的にHTMLの構造を変えてしまう方を選択することにします。
構造は少し違和感がありますが。。。
0
投稿2018/11/12 06:02
編集2018/11/12 06:07
総合スコア994
madoka9393 様
ご回答有難う御座います。
参考サイト、拝見させて頂きましたが、
containerクラスを指定したのちに、孫要素だけを除外することはできませんでした。
また、containerクラス下の要素を個別で指定していく方法もあると思いますが、
個別で指定すると、アニメーションの挙動が変わってしまいます。
回答しておいてなんですがこのHTMLの構成で「.not or :not」を使って「columns」だけ除外するのはかなり難しそうですな…。
お役に立てず申し訳なし。
madoka9393 様
いえいえ、ご回答頂けただけでありがたいです。
今はHTMLの構造を変えるしかないかなと思っています。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/12 07:47