Исчезать границы CSS к невидимым?

Question

Возможно ли убрать границу элемента?Чтобы уточнить, это должно быть вызвано из JavaScript, и использование чего-то вроде jquery для анимации не вариант.Мы используем sencha, но похоже, что вы не можете анимировать что-либо, кроме размера и положения элемента, с помощью extjs.Я знаю, что у css3 есть удобная анимация, но я не могу найти ничего похожего на мои потребности.

Answer 1

Как-то так?

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);
}

Демо на http://jsfiddle.net/gaby/bcn5c/1/

Answer 2

Помните, что переходы не работают в Opera (11.62), если вы просто напишите border-color. Вы должны указать все четыре границы отдельно:

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

http://jsfiddle.net/ds5bM/

Это исправлено в Opera 12.

Answer 3

просто используйте 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;
}