current position：Home>Vue - 09-02 Vue transition and simple animation implementation

Vue - 09-02 Vue transition and simple animation implementation

2022-01-27 01:26:49 【Nanchen_ forty-two】

Vue transition

Vue Animation comparison css The animation in is more complex , You need a new class name

The following is the explanation given on the official website ：

Transition class name

When entering / Leaving the transition , There will be 6 individual class Switch .

  1. v-enter： Define the start state of transition . Takes effect before the element is inserted , Remove the next frame after the element is inserted .

  2. v-enter-active： Define the state when the transition takes effect . Apply... Throughout the transition , Takes effect before the element is inserted , In the transition / Remove... After animation . This class can be used to define the process time to enter the transition , Delay and curve functions .

  3. v-enter-to：2.1.8 Version and above Define the end state of transition . The next frame takes effect after the element is inserted ( meanwhile  v-enter  Removed ), In the transition / Remove... After animation .

  4. v-leave： Define the start state of the exit transition . Takes effect immediately when the exit transition is triggered , The next frame is removed .

  5. v-leave-active： Define the state when the exit transition takes effect . Apply... Throughout the transition , Takes effect immediately when the exit transition is triggered , In the transition / Remove... After animation . This class can be used to define the process time of leaving the transition , Delay and curve functions .

  6. v-leave-to：2.1.8 Version and above Define the end state of the exit transition . The next frame takes effect after the departure transition is triggered ( meanwhile  v-leave  Be deleted ), In the transition / Remove... After animation .

  Look at an example ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="show=!show"> Click me and disappear </button>
				<h1 v-if="show">Nanchen Disappear from sight </h1>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						show:true,
					}
				},
			})
		</script>
	</body>
</html>

The effect is as follows ：

  It's rather stiff , At this time, a transition effect is needed to solve the stiff problem

Put a label on the coat that needs transition <transition>, for example ：

<transition>
	<h1 v-if="show">Nanchen Disappear from sight </h1>
</transition>

Here it says name To match the transition effect name , If you don't write name, You need to add... Before the class name v-, It is suggested to write name Prevent multiple animations from colliding  

<transition name="fade">
	<h1 v-show="isShow">Nanchen Disappear from sight </h1>
</transition>

CSS style ：

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

			.fade-enter-active,
			.fade-leave-active {
				transition: opacity 3s;
			}

The effect is as follows :

 Vue Animation

CSS Animation usage is similar to CSS transition , But in animation v-enter The class name is inserted in the node DOM Will not delete immediately after , But in animationend Delete... When the event is triggered .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<style type="text/css">
		button{
			display: block;
		}
		h1{
			border: 1px solid black;
			display: inline-block;
		}
			@keyframes carroon{
				0%{
					transform: translate(0,0);
				}
				25%{
					transform: translate(0,100px);
				}
				50%{
					transform: translate(100px,100px);
				}
				75%{
					transform: translate(100px,0);
				}
				100%{
					transform: translate(0,0);
				}
			}
			/*  Be careful ： Here is animation instead of transition */
			.carroon-leave-active{
				animation: carroon 1s; 
			}
			.carroon-enter-active{
				animation: carroon 1s; 
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="btnClick"> Click to execute the animation </button>
			<transition name="carroon">
				<h1 v-show="isShow"> A box </h1>
			</transition>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						isShow: true
					}
				},
				methods: {
					btnClick() {
						this.isShow = !this.isShow
					}
				}
			})
		</script>
	</body>
</html>

The effect is as follows ：

Use both transitions and animations

Vue In order to know the completion of the transition , The corresponding event listener must be set . It can be  transitionend  or  animationend , It depends on the... Applied to the element CSS The rules . If you use any of them ,Vue Can automatically identify type and set monitor .

however , In some scenarios , You need to set two transition effects for the same element at the same time , such as  animation  It's quickly triggered and finished , and  transition  The effect is not over . In this case , You need to use  type  Feature and set  animation  or  transition  To make it clear that you need Vue Type of listening .

Transition of initial rendering

Can pass  appear  Property to set the transition of the node in the initial rendering 

<transition appear>
  <!-- ... -->
</transition>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue  Test case </title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
    <style>
        .fade-enter,.fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active,.fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="databinding">
        <transition :duration="{ enter: 5000, leave: 10000 }" name="fade" type="transition" appear
            enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active"
            appear-active-class="animated swing">
            <p v-if="show"> Animation </p>
        </transition>
        <button v-on:click="show = !show"> Am I </button>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#databinding',
            data: {
                show: true
            }
        })
    </script>
</body>

</html>

The effect is as follows ：

About router Transition dynamic effect of

hold <router-view> For label <transition> Just wrap the label

Add one more name Value , After adding a value, it must start with test-......

    <transition name="test">
      <router-view></router-view>
    </transition>

Then set it below style Style can be 

.test-enter,
.test-leave-to {
  opacity: 0;
}
.test-enter-to,
.test-leave {
  opacity: 1;
}
.test-enter-active,
.test-leave-active {
  transition: all 1s;
}

You can achieve the transition effect between pages

copyright notice
author[Nanchen_ forty-two],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270126469859.html

The sidebar is recommended

guess what you like

Random recommended