The way of triggering transition in Vue.js

Question

I am trying to make transition in Vue, and I have a question how to trigger it.

I saw normally transition is triggered by v-show or v-if. but is there another way to execute?

I want to

・Keep my element's opacity as 0.2 and becomes 1 when the transition is triggered

・Also I am using The Element.getBoundingClientRect() to decide the area where transition should happen.

But obviously, v-show or v-if do not let me to do since they make the element disappear or display: none( so I can not measure the element by .getBoundingClientRect())

This is my template

    <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>

and Vue script

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;
            }
        }
    }
}

and 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;
    }

Thanks for your help :)

Asimple · Accepted Answer · 2020-05-25 15:38:50Z

1

I think you can use usual CSS transition (or JS in some cases) for this, not Vue transitions. Vue transitions are used for lists/appear/disappear. In any other cases it's better to use CSS/JS. They wrote more about state transition here

answered May 25, 2020 at 15:38

Asimple

6503 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nagisa Ando Over a year ago

Hi, hm I was thinking same after posting this question. Probably I would do that you said. Thanks!

Collectives™ on Stack Overflow

The way of triggering transition in Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related