Leaflet: Permitir que o usuário NÃO tenha a animação pop-up fadeOut no close-up (v1 beta2)

Criado em 8 nov. 2015  ·  4Comentários  ·  Fonte: Leaflet/Leaflet

O novo folheto v1 traz a animação fadeOut ao fechar o pop-up. É ótimo, mas:

Seria ótimo ter a opção de permitir que o usuário escolha ter ou NÃO este fadeOut.
Explicação: Eu executo algumas funções map.on.popupopen para estilizar em tempo real o pop-up que está abrindo (estilos diferentes para lugares diferentes na terra). E com o novo fadeout agora incluído, os estilos que adiciono já são visíveis durante o fadeOut do pop-up CLOSING (antes que o novo pop-up seja aberto). O que leva a uma mistura visual feia :)

http://jsfiddle.net/Pe5xU/268/

Acho que seria ótimo deixar-nos escolher ter / não ter fadeIn / fadeOut de pop-ups independentemente um do outro, em vez da opção global fadeAnimation true / false.

Mesmo sem pensar no "meu" probleminha, adoro ver os popups desaparecerem sem desaparecer e mybe não estou só ... :)

Comentários muito úteis

Se você já está estilizando pop-ups, basta adicionar este bit de CSS:

.leaflet-fade-anim .leaflet-popup {
  transition: none;
}

vamos escolher ter / não ter fadeIn / fadeOut de pop-ups independentemente uns dos outros, em vez da opção global fadeAnimation true / false.

Basta adicionar uma classe CSS para aqueles pop-ups para os quais deseja desativar o fade anims e usar o mesmo pedaço de CSS :-)

Não acho que seja um recurso muito importante de se ter, especialmente quando pode ser contornado com um pouco de CSS extra.

Todos 4 comentários

Se você já está estilizando pop-ups, basta adicionar este bit de CSS:

.leaflet-fade-anim .leaflet-popup {
  transition: none;
}

vamos escolher ter / não ter fadeIn / fadeOut de pop-ups independentemente uns dos outros, em vez da opção global fadeAnimation true / false.

Basta adicionar uma classe CSS para aqueles pop-ups para os quais deseja desativar o fade anims e usar o mesmo pedaço de CSS :-)

Não acho que seja um recurso muito importante de se ter, especialmente quando pode ser contornado com um pouco de CSS extra.

Obrigado. Mas ele pula o fadeIn entretanto ...

Não é muito importante, você está certo.
Isso pode ser feito removendo algumas linhas do código-fonte (é ruim, eu sei :).
Ao remover o pop-up, pulo a parte IF para evitar o fadeOut:

 L.Popup = L.Layer.extend ({
 ...

 onRemove: function (map) {
 // if (map._fadeAnimated) {
 // L.DomUtil.setOpacity (this._container, 0);
 // this._removeTimeout = setTimeout (L.bind (L.DomUtil.remove, L.DomUtil, this._container), 200);
 //} outro {
 L.DomUtil.remove (this._container);
 //}
 map.fire ('popupclose', {popup: this});
 if (this._source) {
 this._source.fire ('popupclose', {popup: this}, true);
 }
 },
 ...

 )}

@remilev Não modifique a versão reduzida do código-fonte. Ninguém pode entender isso.

@IvanSanchez Obrigado!

.leaflet-fade-anim .leaflet-popup {
  transition: none;
}

Isso funciona para mim.

Esta página foi útil?
0 / 5 - 0 avaliações