Попытка анимировать список определения отображения / скрытия со скрытым атрибутом (скрытый атрибут приводит к неработоспособности анимации)

Swift 3

В Swift 3 есть addingPercentEncoding

var originalString = "test/test"
var escapedString = originalString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed)
print(escapedString!)

Выход:

test% 2Ftest

< / blockquote>

Swift 1

В iOS 7 и выше есть stringByAddingPercentEncodingWithAllowedCharacters

var originalString = "test/test"
var escapedString = originalString.stringByAddingPercentEncodingWithAllowedCharacters(.URLHostAllowedCharacterSet())
println("escapedString: \(escapedString)")

Выход:

test% 2Ftest

Следующие полезные (инвертированные) наборы символов:

URLFragmentAllowedCharacterSet  "#%<>[\]^`{|}
URLHostAllowedCharacterSet      "#%/<>?@\^`{|}
URLPasswordAllowedCharacterSet  "#%/:<>?@[\]^`{|}
URLPathAllowedCharacterSet      "#%;<>?[\]^`{|}
URLQueryAllowedCharacterSet     "#%<>[\]^`{|}
URLUserAllowedCharacterSet      "#%/:<>?@[\]^`

Если вы хотите, чтобы другой набор символов был экранирован, создайте набор: Пример с добавлением " = "character:

var originalString = "test/test=42"
var customAllowedSet =  NSCharacterSet(charactersInString:"=\"#%/<>?@\\^`{|}").invertedSet
var escapedString = originalString.stringByAddingPercentEncodingWithAllowedCharacters(customAllowedSet)
println("escapedString: \(escapedString)")

Выход:

test% 2Ftest% 3D42

Пример проверки символов ascii не в set:

func printCharactersInSet(set: NSCharacterSet) {
    var characters = ""
    let iSet = set.invertedSet
    for i: UInt32 in 32..<127 {
        let c = Character(UnicodeScalar(i))
        if iSet.longCharacterIsMember(i) {
            characters = characters + String(c)
        }
    }
    print("characters not in set: \'\(characters)\'")
}
0
задан magenta placenta 16 January 2019 в 17:04
поделиться

1 ответ

Вы правильно догадались, проблема в том, что display не является анимируемым свойством CSS.

Вы должны основывать анимацию на анимируемом свойстве, таком как, например, opacity.

Вот небольшая демонстрация:

const el = document.querySelector('div');

document.querySelector('button').addEventListener('click', () => {
  if (el.classList.contains('visible'))
    el.classList.remove('visible');
  else
    el.classList.add('visible');
})
div {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
}
<div class="visible">some content!</div>
<button>toggle visibility</button>

Как вы могли заметить, настройка непрозрачности 0 не скрывает элемент полностью (т.е. он все еще занимает место). В случае, если это что-то нежелательно, вы можете рассмотреть анимацию другого свойства, такого как ширина или высота.

0
ответ дан Simone 16 January 2019 в 17:04
поделиться
Другие вопросы по тегам:

Похожие вопросы: