3

ホバー時にこれを行う「+」を含むdivがあります：

.removal {
  opacity: 0;
  filter: alpha(opacity=0);
  margin-left: -10px;
  display: inline-block;
  -webkit-transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

.term:hover .removal {
  position: relative;
  left: 13px;
  opacity: 1;
  color: red;
  -webkit-transform: rotate(45deg);
  -webkit-animation: move 0.4s;
}

@-webkit-keyframes "move" {
  from {
    left: 3px;
    filter: alpha(opacity=0);
    opacity: 0;
  }
  to {
    left: 13px;
    filter: alpha(opacity=100);
    opacity: 1;
  }
}

私が経験している問題は、そのliからマウスを離したときです.CSSに.で見つかったアニメーションを本質的に元に戻しmoveたい.

これを行う方法に関するヒントはありますか？.term( のクラス) にトランジションを追加する必要がありliますか?

ここにJSfiddleがあります

4

2 に答える 2

4 
.removal {
  opacity: 0;
  filter: alpha(opacity=0);
  margin-left: -10px;
  display: inline-block;
  -webkit-transform: rotate(0deg);
  -webkit-transition: all 1s ease-in-out;
  position:relative;
}

.term:hover .removal {
  opacity: 1;
  color: red;
  left:13px;
  -webkit-transform: rotate(45deg);
  filter: alpha(opacity=100);
}

ここでjsFiddle

于 2013-08-31T16:02:47.230 に答える
0

コメントを追加できないので (愚かな 50 の評価ポイントが必要です)、回答を追加する必要があります。

あなたはすでに「機能する」ソリューションを持っていますが、...
... あなたのマークアップは、特に意味論的な観点からはあまり「理想的」ではありません (HTML5 doctype で使用されていない場合は無効ですらあります)。

より「セマンティックなコード」を優先して、この「CSSギミック」なしでそれを行いたいと思います。したがって、疑似要素 (::before および ::after) を使用できます。これは、少なくとも一部のブラウザーでは「アニメーション化」することもできます - http://css-tricks.com/transitions-and-animations-on-cssを参照してください。 -生成されたコンテンツ/

于 2013-08-31T16:53:06.793 に答える