0

В самописном приложении светофор не работает анимация прозрачности через компонент-обертку "transition".

<template>
    <div id="yellowpage">
        <center><h2>Вы находитесь на желтом свете</h2></center>
        <div id="frame">

            <div id="red1"></div>

            <div id="yellow1" v-if="start == 0"></div>

            <transition name="fade">
                <div id="yellow" v-if="start == 1"></div>
            </transition>

            <div id="green"></div>

            <button id="but" v-on:click=changeNumber>Запустить/ продолжить работу светофора!</button>

        </div>

    </div>

</template>

<script>

    export default {
        name: 'yellowpage',
        data () {
            return {
                start: 0,
            }
        },
        methods: {
            changeNumber() {
                this.start = 1;
                var self = this;
                setTimeout(function(){
                    window.location.href = '/3';
                },4000);
                setTimeout(function(){
                    self.start = 0;
                },5000);
            }
        }
    }

</script>

<style>

    #but{
        margin-top: 10%;
    }

    #frame
    {
        border: 2px solid grey;
        width: 210px;
        height: 655px;
        border-radius: 10px;
        margin-top: 10%;
        margin-left: 45%;
        background: lightgrey;
    }
    #red
    {
        width: 180px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 15px;
    }
    #red1
    {
        width: 180px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 15px;
        opacity: 0.1
    }
    #yellow
    {
        width: 180px;
        height: 200px;
        background-color: yellow;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 15px;
    }
    #yellow1
    {
        width: 180px;
        height: 200px;
        background-color: yellow;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 15px;
        opacity: 0.5;
    }
    #green
    {
        width: 180px;
        height: 200px;
        background-color: green;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 15px;
        opacity: 0.1;
    }

    .fade-enter-active {
        transition: opacity 3s ease-in-out;
    }

    .fade-enter {
        opacity: 0;
    }
    .fade-enter-to{
        opacity: 1;
    }
</style>

А вот для красного света все прекрасно работает:

<template>
    <div id="redpage">
        <center><h2>Вы находитесь на красном свете</h2></center>
        <div id="frame">

            <div id="red1" v-if="start == 0"></div>

            <transition name="fade">
                <div id="red" v-if="start == 1"></div>
            </transition>

            <div id="yellow"></div>

            <div id="green"></div>

            <button id="but" v-on:click=changeNumber>Запустить/ продолжить работу светофора!</button>

        </div>

    </div>

</template>

<script>

    export default {
        name: 'redpage',
        data () {
            return {
                start: 0,
            }
        },
        methods: {
            changeNumber() {
                this.start = 1;
                var self = this;
                setTimeout(function(){
                    window.location.href = '/2';
                },4000);
                setTimeout(function(){
                    self.start = 0;
                },5000);
            }
        }
    }

</script>

<style>

    #but{
        margin-top: 10%;
    }

    #frame
    {
        border: 2px solid grey;
        width: 210px;
        height: 655px;
        border-radius: 10px;
        margin-top: 10%;
        margin-left: 45%;
        background: lightgrey;
    }
    #red
    {
        width: 180px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 15px;
    }
    #red1
    {
        width: 180px;
        height: 200px;
        background-color: red;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 15px;
        opacity: 0.1
    }
    #yellow
    {
        width: 180px;
        height: 200px;
        background-color: yellow;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 15px;
        opacity: 0.5;
    }
    #green
    {
        width: 180px;
        height: 200px;
        background-color: green;
        border-radius: 50%;
        margin-left: 15px;
        margin-top: 15px;
        opacity: 0.25;
    }

    .fade-enter-active {
        transition: opacity 3s ease-in-out;
    }

    .fade-enter {
        opacity: 0;
    }
    .fade-enter-to{
        opacity: 1;
    }
</style>
2
  • 3
    Я не стал собирать проект, но меня терзают смутные сомнения, что проблема в том, что у вас стили не scoped. При сборке это может вызвать некие конфликты, которые не будут давать ошибок. Попробуйте сделать <style scoped> Обязательно сообщите, получилось или нет. Если что, ещё подумаем. 22 мар 2019 в 11:32
  • Благодарю. Все прекрасно работает. 25 мар 2019 в 11:17

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.