A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 22nd day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Today we will focus on animation and transitions in Vue

1. Understanding of vue animation

Operate trasition or animation of the CSS

Vue adds/removes specific classes to the target element

2. Coding of basic transition animation

  1. Wrap

  2. Defining class styles

  • Specify the transition style: Transition
  • Specifies the style when hidden: opacity/ other

3. Transition class name

  • xxx-enter-active: Specifies the transition to display
  • xxx-leave-active: Specifies the hidden transition
  • xxx-enter: Specifies the style to hide

Transition code examples

/* Show/hide transition effects */
.xxx-enter-active..xxx-leave-active{
    transition: opacity 0.5 s;
}
/* Style when hidden */
.xxx-enter..xxx-leave-to{
    opacity: 0;
}

.move-enter-active {
    transition: all 1s;
}
.move-leave-active {
    transition: all 3s;
}
.move-enter..move-leave-to {
    opacity: 0;
    transition: translateX(20px);
}
Copy the code
<body>
    <div id="demo1">
        <button @click="isShow=! isShow">Transition 1</button>
        <transition name="xxx">
            <p v-show="isShow">YK bacteriology front end</p>
        </transition>   
    </div>

    <div id="demo2">
        <button @click="isShow=! isShow">Transition 2</button>
        <transition name="move">
            <p v-show="isShow">YK bacteria learn the front end every day</p>
        </transition>
    </div>

    <script src=".. /js/vue.js"></script>
    <script>  
        new Vue({
            el: "#demo1".data() {
                return {
                    isShow: true}}})new Vue({
            el: "#demo2".data: {
                isShow:true}})</script>
</body
Copy the code

The effect

<template>
    <div>
        <button @click="isShow = ! isShow">Show/Hide</button>
        <transition-group name="hello" appear>
            <h1 v-show=! "" isShow" key="1">Hello!</h1>
            <h1 v-show="isShow" key="2">It is silicon valley!</h1>
        </transition-group>
    </div>
</template>

<script>
    export default {
        name:'Test'.data() {
            return {
                isShow:true}}},</script>

<style scoped>
    h1{
        background-color: orange;
    }
    /* The beginning of entry, the end of departure */
    .hello-enter..hello-leave-to{
        transform: translateX(-100%);
    }
    .hello-enter-active..hello-leave-active{
        transition: 0.5 s linear;
    }
    /* The end of the entry, the beginning of the departure */
    .hello-enter-to..hello-leave{
        transform: translateX(0);
    }

</style>
Copy the code

Animation code examples

.bounce-enter-active {
    animation: bounce-in .5s;
}
.bounce-leave-active {
    animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scale(0);
        }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1); }}Copy the code
<body>
    <div id="example-2">
        <button @click="show = ! show">Toggle show</button><br>
        <transition name="bounce">
          <p v-if="show" style="display: inline-block;">YK bacteria have been learning the front end</p>
        </transition>
      </div>

      <script src=".. /js/vue.js"></script>
      <script>
        new Vue({
            el: '#example-2'.data: {
                show: true}})</script>
</body>
Copy the code

<template>
    <div>
        <button @click="isShow = ! isShow">Show/Hide</button>
        <transition name="hello" appear>
            <h1 v-show="isShow">Hello!</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        name:'Test'.data() {
                return {
                        isShow:true}}},</script>

<style scoped>
    h1{
        background-color: orange;
    }

    .hello-enter-active{
        animation: atguigu 0.5 s linear;
    }

    .hello-leave-active{
        animation: atguigu 0.5 s linear reverse;
    }

    @keyframes atguigu {
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px); }}</style>
Copy the code

Use a third-party animation library

animate.style/

<template>
    <div>
        <button @click="isShow = ! isShow">Show/Hide</button>
        <transition-group 
            appear
            name="animate__animated animate__bounce" 
            enter-active-class="animate__swing"
            leave-active-class="animate__backOutUp"
        >
            <h1 v-show=! "" isShow" key="1">Hello!</h1>
            <h1 v-show="isShow" key="2">It is silicon valley!</h1>
        </transition-group>
    </div>
</template>

<script>
    import 'animate.css'
    export default {
        name:'Test'.data() {
                return {
                    isShow:true}}},</script>

<style scoped>
    h1{
        background-color: orange;
    }
</style>
Copy the code

conclusion

What it does: When inserting, updating, or removing DOM elements, add style class names to the elements as appropriate.

Writing:

  1. Ready for style:

    • The style in which the element enters:
      1. V-enter: indicates the entry point
      2. V-enter-active: Indicates that the system is entering the active mode
      3. V-enter -to: indicates the end point of entry
    • The style in which the element leaves:
      1. V-leave: the departure point
      2. V-leave-active: indicates the departure process
      3. -Leonard: V-leave-to

  2. Wrap the element you want to transition with
    and configure the name attribute:

<transition name="hello">
    <h1 v-show="isShow">Hello!</h1>
</transition>
Copy the code
  1. Note: If multiple elements need to be transitioned, use:<transition-group>, and each element must be specifiedkeyValue.

Finally, welcome to my column and make friends with YK bacteria