Сделать границу css невидимой?

#javascript #extjs #css

Вопрос:

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

Ответ №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 /

1. для fade out состояние:hover border-color должно быть transparent или цветом фона родительского элемента.

2. Кроме того, при использовании CSS3 имейте в виду, что это несовместимо с некоторыми браузерами — кашель — IE.

3. @JKirchartz, установка непрозрачности от 0 до rgba такой же, как transparent … хотя она по-прежнему показывает тот же div фон, а не элемент под ним .. ( использование цвета элемента под ним будет работать, но не если элемент ниже не является сплошным цветом .. )

4. @vonkly, очень правильно, хотя OP запрашивает переходы, поэтому я решил, что он знает.. хотя это хороший момент..

5. 1 но вы всегда должны размещать свойство standards ниже его специфичных для поставщика реализаций.

Ответ №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.

Ответ №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;
}