みなさんこんにちは
HTML、CSS、JavaScriptでトランプゲームのようなものを作りたいと思っています
下はイメージなのですが場に5枚のカード(画面下側に並んでいるカード)があって、クリックすると台札として、画面上側中央にスーッと移動(アニメーション付きで)させたいと思っています。
いろいろ試しているのですがどうもうまくいきません。
たとえば..
cssで、もともとカードにはcardというクラスをつくってスタイリングしておいて、クリックされたときにmovingというクラスを追加すればよいかな?とおもったんですが...これはうまくいきませんでした。
.moving {
postion:absolute;
left:0;
right:0;
top:30px;
margin:auto;
}
card {
transition:all 1s;
}
ではということで...
カードをクリックすると、クリックしたカードの要素を取得して
JavaScriptで
obj.setAttribute('style','position: absolute;top:30px;left:0;right:0;margin:auto;')
としてみたのですが..カード自体は移動されますがアニメーションされずに瞬間的にいってしまいます。
transition:all 1s;が効いていない感じです。
どのような方法だとスマートに出来るでしょうか?
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/30 00:27