, если вы go перейдете в мой текущий проект https://tagfireandsecurity.co.uk/services и нажмете на разные категории служб, будет запущена красивая анимация.
Однако, если вы переключитесь между службами которые находятся в той же категории
(например, в разделе Home переключитесь между CCTV и Intruder Systems )
он просто меняет содержимое, и я не уверен, как его оживить. Было бы здорово, если бы это было так.
У меня есть переход vue для всего div, и он отображается только тогда, когда переменная currentService не пуста. Это означает, что переключение между категориями вызовет анимацию, но у меня нет способа оживить содержимое внутри нее, поскольку все, что он делает, это заменяет текст и изображение.
Вот что страница моих услуг выглядит так:
<template> <div class="services">
<div class="header services__header">
<h1 :class="$mq">Services</h1>
</div>
<div class="services__services-container" :class="$mq">
<div class="select-wrapper">
<div
class="services__services-container__category-selection"
:key="`category-${index}`"
v-for="(item, index) in this.JSON"
>
<!-- GENERATE CATEGORIES -->
<input
v-model="currentCategory"
@change="UncheckRadio"
type="radio"
class="services__services-container__category-selection__category"
:value="item"
/>
<label
:for="item"
:class="{'selected-category': currentCategory === item}"
:ref="item.name"
>{{ item.name }}</label>
<div class="services-underline"></div>
</div>
</div>
<!-- GENERATE SERVICES -->
<transition name="fade" mode="out-in">
<div class="services__services-container__service-selection" v-if="currentCategory != null">
<div class="select-wrapper">
<div
class="services__services-container__service-selection__service"
:key="`option-${index}`"
:class="$mq"
v-for="(option, index) in currentCategory.options"
>
<input
type="radio"
class="services__services-container__service-selection__service__wrapper"
:class="$mq"
:value="option"
v-model="currentService"
/>
<label
:for="option"
:class="{'selected-service': currentService === option}"
:ref="option.optionName"
>{{ option.optionName }}</label>
<div class="services-underline"></div>
</div>
</div>
</div>
</transition>
<!-- GENERATE DESCRIPTIONS -->
<transition name="fade" mode="out-in">
<div
class="services__services-container__product-description"
v-if="currentService != ''"
:class="$mq"
>
<img :src="currentService.images" :class="$mq" alt />
<div class="services__services-container__product-description__description" :class="$mq">
<h3>{{currentService.title}}</h3>
<p
v-for="(paragraph, index) in currentService.description"
:key="`paragraph-${index}`"
>{{ paragraph }}</p>
<h4>Key Features:</h4>
<ul>
<li v-for="(feature, index) in currentService.features" :key="`feature-${index}`">
<i class="far fa-check-square"></i>
{{ feature }}
</li>
</ul>
</div>
</div>
</transition>
</div> </div> </template>
<script> import services from "@/JSON/services.json"; export default { name: "Services", data: function() {
return {
JSON: [],
currentCategory: "",
currentService: ""
}; }, created: function() {
//TO TEST
this.JSON = services.services; }, methods: {
UncheckRadio: function() {
this.currentService = "";
} } }; </script> <style lang="scss" scoped> @import "@/scss/variables.scss"; @import "@/scss/button.scss"; @import "@/scss/header.scss"; @import "@/scss/input.scss"; .services__header { background-color: $white; & h1 {
color: $colour-blue;
&.md {
font-size: 3rem;
}
&.lg {
font-size: 3rem;
} } }
.services { width: 100%; height: auto; display: grid; grid-template-rows: 15vh auto auto auto auto; &__services-container {
//FLEX
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
//
padding: 2rem;
min-height: 100vh;
&.lg {
min-height: 80vh;
}
&__category-selection {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
//
position: relative;
padding: 1rem;
cursor: pointer;
& input {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
& label {
cursor: pointer;
color: $colour-blue;
}
}
&__service-selection {
&__service {
//FLEX
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: wrap;
//
position: relative;
padding: 1rem;
cursor: pointer;
& input {
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
opacity: 0;
}
& label {
cursor: pointer;
color: $colour-green;
text-align: center;
}
}
}
/* For IE10 */
select::-ms-expand {
display: none;
}
&__product-description {
transition: all 0.5s ease;
padding: 2rem;
border-radius: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
&.lg {
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
}
& img {
margin-bottom: 1rem;
height: auto;
width: 80%;
&.sm {
margin-bottom: 2rem;
}
&.lg {
height: auto;
width: 25rem;
margin-right: 5rem;
}
}
&__description {
transition: all 0.5s ease;
& p {
text-align: center;
margin: 1rem 0;
}
& h3 {
text-align: center;
margin-bottom: 2rem;
}
& h4 {
margin: 2rem 0;
}
& ul {
text-align: center;
& li {
margin-bottom: 1rem;
list-style: none;
& i {
color: $colour-green;
margin-right: 0.5rem;
}
}
}
&.lg {
align-items: flex-start;
flex-direction: row;
justify-content: space-between;
max-width: 60ch;
& p {
text-align: left;
margin: 1rem 0;
}
& h3 {
margin-bottom: 2rem;
}
& h4 {
margin: 2rem 0;
}
& ul {
text-align: left;
& li {
margin-bottom: 1rem;
list-style: none;
& i {
color: $colour-green;
margin-right: 0.5rem;
}
}
}
}
}
} } }
.fade-enter-active, .fade-leave-active { transition: all 0.5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8
*/ { opacity: 0; transform: translateY(20rem); }
.select-wrapper { //FLEX display: flex; justify-content: center; align-items: center; flex-wrap: wrap; // border-radius: 1.5rem; position: relative; width: auto; height: auto; margin-bottom: 1rem; }
.select-icon { font-size: 1rem; color: $white; position: absolute; right: 0.5rem; pointer-events: none; }
.transition { transition: all 0.25s linear; }
.selected-category { transition: all 0.5s ease-in; & ~ .services-underline {
width: 20%; } }
.selected-service { transition: all 0.5s ease-in; & ~ .services-underline {
width: 20%;
background: $colour-green; } }
.services-underline { position: absolute; display: block; width: 0; height: 2px; background: $colour-blue; transition: width
0.3s; bottom: 0.5rem; } </style>