Vue.js中触发转换的方式

Question

我正在尝试在 Vue 中进行转换，但我有一个问题如何触发它。

我看到通常过渡是由 v-show 或 v-if 触发的。 但是还有另一种执行方式吗？

我想要

・保持我元素的不透明度为 0.2 并在触发转换时变为 1

・我也在使用 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;
    }

谢谢你的帮助：）

Answer 1

我认为您可以为此使用通常的 CSS 转换（或 JS 在某些情况下），而不是 Vue 转换。 Vue 转换用于列表/出现/消失。 在任何其他情况下，最好使用 CSS/JS。 他们在这里写了更多关于 state 转换的信息