imgの境界線を時間カウントダウンで制御 - 完全円、部分円弧、何もないまで

Question

私は正面にhtml、css、angularjsを使用します。 私は最初の状態で太い境界線の完全な円で囲まれているimgを持っています。私は1分のカウントダウンを開始します。私は国境が時間がたつにつれて部分的に消えてしまいたいです。

たとえば、境界の境界の59/60だけが表示され、2番目の境界が58/60が表示された後、...、30秒後に円の半分が表示され、そう、それが完全に消えてしまうまで。

さらに、可能であれば、移行をスムーズにしたいと思います。任意のヘルプ

Answer 1

ため

おかげであなたはあなたのケースとCSSの遷移でconditionnal CSSのためng-classの組み合わせを使用する必要があります。

例えば半分見え

#myTransition { 
    opacity: .5; 
    transition: opacity .5s ease-out; 
    -moz-transition: opacity .5s ease-out; 
    -webkit-transition: opacity .5s ease-out; 
    -o-transition: opacity .5s ease-out; 
}