ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add transition to solutions

This commit is contained in:
Ramon Wenger 2019-02-04 18:54:55 +01:00
parent a08be83283
commit 07785ae2c1
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/cypress/integration/solutions.spec.js
View File

@ -5,7 +5,9 @@ describe('Solutions', () => {
cy.visit('/module/lohn-und-budget'); cy.visit('/module/lohn-und-budget');
cy.get('[data-cy=solution]').first() cy.get('[data-cy=solution]').first()
.should('contain', 'anzeigen').then($solution => { .should('contain', 'anzeigen')
.should('not.contain', 'Lösungssatz')
.then($solution => {
cy.wrap($solution).within(() => { cy.wrap($solution).within(() => {
cy.get('[data-cy=show-solution]').click(); cy.get('[data-cy=show-solution]').click();
}); });

19
client/src/components/content-blocks/Solution.vue
View File

@ -4,9 +4,11 @@
<template v-if="!visible">anzeigen</template> <template v-if="!visible">anzeigen</template>
<template v-else>ausblenden</template> <template v-else>ausblenden</template>
</a> </a>
<p class="solution__text" data-cy="solution-text" v-if="visible"> <transition name="fade">
{{value.text}} <p class="solution__text fade" data-cy="solution-text" v-if="visible">
</p> {{value.text}}
</p>
</transition>
</div> </div>
</template> </template>
@ -44,6 +46,7 @@
/*margin-bottom: 15px;*/ /*margin-bottom: 15px;*/
display: block; display: block;
cursor: pointer; cursor: pointer;
font-weight: 400;
} }
&__text { &__text {
@ -51,4 +54,14 @@
color: $color-grey; color: $color-grey;
} }
} }
.fade-enter-active,
.fade-leave-active {
transition: opacity .3s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style> </style>