Способ срабатывания перехода в Vue. js - PullRequest
Новая
       20

Способ срабатывания перехода в Vue. js

2 голосов
/ 25 мая 2020

Я пытаюсь выполнить переход в Vue, и у меня есть вопрос, как его запустить.

Я видел, что обычно переход запускается v-show или v-if. но есть ли другой способ казнить?

Я хочу

・ Сохранять непрозрачность моего элемента равной 0,2 и становиться равной 1 при срабатывании перехода

The Также я использую Element.getBoundingClientRect (), чтобы определить область, в которой должен произойти переход.

Но, очевидно, v-show или v-if не позволяют мне этого сделать, поскольку они заставляют элемент исчезать или отображать: none (поэтому я не могу измерить элемент с помощью .getBoundingClientRect ( ))

Это мой шаблон 

    <ul class="outer-wrapper" >
        <li class="slide one" >
            <div>
                <a href="#">
                    <transition name="fade-animation">
                        <img v-show="show" ref="slider1" src="../assets/test.png">
                    </transition>
                </a>
             </div>
        </li>
        .
        .
        .
    </ul>

и Vue скрипт 

export default {
    name: 'test',
    data(){
        return{
            show: false
        }
    },
    methods: {
        opacityChange: function () { 

            let slider = this.$refs.slider1.getBoundingClientRect();

            let sliderLeft = Math.floor(slider.left);
            let sliderRight = Math.floor(slider.right);
            let centerPoint = Math.floor(window.innerWidth / 2);
            let sliderWidth = slider.width;


            if(sliderRight <= centerPoint + sliderWidth && sliderLeft >= centerPoint - sliderWidth) {
                this.show = true;
            } else {
                this.show = false;
            }
        }
    }
}

и css 


  .fade-animation-enter,
    .fade-animation-enter-leave-to {
        opacity: 0.2;

    }   
    .fade-animation-enter-to,
    .fade-animation-enter-leave {
        opacity: 1;

    }
    .fade-animation-enter-active,
    .fade-animation-enter-leave-active {
        transition: opacity, transform 200ms ease-out;
    }

Спасибо за ваша помощь :)

1 Ответ

1 голос
/ 25 мая 2020

Я думаю, вы можете использовать для этого обычный переход CSS (или JS в некоторых случаях), а не переходы Vue. Vue переходы используются для списков / появления / исчезновения. В остальных случаях лучше использовать CSS / JS. Больше про переход состояний писали здесь

...