Minhas imagens nessa SPA tem o style abaixo:
img:hover { transition: all 1s; transform: scale(1.2); }
Porém o mesmo para de funcionar após a ativação da diretiva transform. Como posso fazer os dois coexistirem?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Minhas imagens nessa SPA tem o style abaixo:
img:hover { transition: all 1s; transform: scale(1.2); }
Porém o mesmo para de funcionar após a ativação da diretiva transform. Como posso fazer os dois coexistirem?
Fala ai Saulo, tudo bem? O que é feito quando a diretiva transform é ativada? Alguma classe ou estilos são aplicados?
Fico no aguardo.
rotate 90deg
import Vue from 'vue';
Vue.directive('meu-transform', {
bind(el, binding, vnode) {
let current = 0;
el.addEventListener('dblclick', function() {
current += 90;
el.style.transform = `rotate(${current}deg)`;
});
}
});Fala ai Saulo, tudo bem? O problema é que o estilo definido inline no elemento com a propriedade style é mais prioritário do que o hover ou demais estilos informados no CSS.
Nesse caso, você pode tentar aplicar uma classe no seu elemento em vez de modificar o estilo diretamente nele:
el.classList.add(`rotate-${current}`)E no seu CSS você ter as classes para os angulos de rotação:
.rotate-90 {
transform: rotate(90deg);
}
.rotate-180 {
transform: rotate(180deg);
}
.rotate-270 {
transform: rotate(270deg);
}
.rotate-360 {
transform: rotate(360deg);
}Espero ter ajudado.