Javascript 将css边框淡入不可见状态？

是否可以淡出元素的边框？为了澄清这一点，这需要从javascript触发，并且使用类似jquery的东西来制作动画不是一个选项。我们使用的是sencha，但除了使用extjs设置元素大小和位置外，您似乎无法设置任何动画。我知道css3有一些方便的动画，但我找不到任何与我的需要类似的东西。

只需使用css3转换即可

#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

像这样的

div.transition {
  border: 5px solid rgba(0,0,0,1);
  height: 100px;
  width: 100px;
  background-color: #ffffff;

  -webkit-transition: border-color 1s linear; /* Saf3.2+, Chrome */
     -moz-transition: border-color 1s linear; /* FF3.7+ */
       -o-transition: border-color 1s linear; /* Opera 10.5 */
          transition: border-color 1s linear;
}

div.transition:hover {
  border-color: rgba(0,0,0,0);
}

---

演示在

记住，在Opera（11.62）中，如果您只编写边框颜色，则过渡不起作用。必须分别指定所有四个边框：

-o-transition: border-top-color 1s linear, border-right-color 1s linear, border-bottom-color 1s linear, border-left-color 1s linear;

---

这在Opera 12中是固定的。

我猜你可以编写自己的tweening函数，将宽度收缩为0，将颜色淡入透明，如果没有其他功能的话。对于淡出：悬停状态<代码>边框颜色应为<代码>透明或父元素的背景色。此外，使用CSS3时，请记住，这与某些浏览器不兼容-cough-即@JKirchartz，通过

rgba

将不透明度设置为0与

transparent

相同。。尽管它仍然显示相同的

div

s背景，而不是下面的元素。。（使用下面元素的颜色会起作用，但如果下面的元素不是纯色就不行了。）@vonkly，非常正确，尽管OP要求转换，所以我想他是知道的。。这一点很好，但是，您应该始终将standards属性放在其特定于供应商的实现下面。