4
respostas

Componente transition

Apliquei o código para adicionar o componente transition, porém está dando o seguinte erro no console.

vue.common.js?e881:1137 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

O que pode está errado? segui as informações da aula, será que esqueci algo ?

4 respostas

Você pode mandar seu código pra gente dar uma olhada?

Tem alguma forma de eu enviar o código zipado aqui? Acredito que seja alguma coisa relacionado ao projeto como um todo, talvez alguma instalação errada pois seguir o código igualzinho aos das aulas.

Zipado não. Só coloca a parte do código que você fez o transition :-)

Fiz exatamente como está na aula por isso achei estranho não funcionar.

Segue o código.

<template>

  <div class="painel">

    <h2 class="painel-titulo" @dblclick="visivel = !visivel">{{ titulo }}</h2>
    <transition name="painel-fade">
      <div class="painel-conteudo" v-show="visivel">
        <slot></slot>
      </div>
    </transition>
  </div>

</template>

<script>
export default {
    props: ['titulo'],

    data() {

       return {

           visivel: true
       }

   }
}
</script>

<style scoped>
/* estilo do painel */ 
.painel {
    padding: 0 auto;
    border: solid 2px grey;
    display: inline-block;
    margin: 5px;
    box-shadow: 5px 5px 10px grey;
    width: 200px;
    height: 100%;
    vertical-align: top;
    text-align: center;
}

.painel .painel-titulo {
    text-align: center;
    border: solid 2px;
    background: lightblue;
    margin: 0 0 15px 0;
    padding: 10px;
    text-transform: uppercase;
}

.painel-fade-enter, .painel-fade-leave-active {
  opacity: 0
}

.painel-fade-enter-active, .painel-fade-leave-active {
  transition: opacity .4s
}

</style>