vue animation
cnpm install animate.css --save    yarn add animate.css  // install
import 'animate.css'  // Where to use and where to introduce
 3 .0
------------------------------------------------------------------------------------------
 <transition-group appear name="animate__animated animate__bounce"
enter-active-class="animate__zoomInDown"
 leave-active-class="animate__zoomOutDown">
      <!-- // The content to be animated is wrapped here   To an element or delete a label -group -->
  

      <!-- End of animation -->
    </transition-group>

Partial renderings  

 App.vue

<template> <!-- <div id="nav"> --> <!-- vue3 Removed from tag attribute Added custom attribute
custom Can be used to customize router-link Content of However, when used, the route cannot jump Need at this time v-slot="{navigate}"
Triggered by events navigate Method can jump to the page If there are two routing addresses first /home The second is /home/index exact-acitve-class
It will only be added after exact matching class Class name active-class It will be added if it contains class Class name vue2 Writing in <router-view to="/"
tag="button" exact-active-class="active">home</router-view> --> <!--
<router-link to="/" custom v-slot="{navigate, isExactActive}"> <button
@click="navigate" :class="isExactActive ? 'active' : ''">home</button>
</router-link> | <router-link to="/about" custom v-slot="{navigate,
isExactActive}"> <button @click="navigate" :class="isExactActive ? 'active' :
''">about</button> </router-link> | --> <!-- </div> --> <!-- animation --> <div> <div>
<router-view v-slot="{ Component }"> <transition name="ani"> <component
:is="Component" class="page1"></component> </transition> </router-view> </div>
<!-- <router-view></router-view> --> </div> </template> <style lang="scss">
#app { font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; //
text-align: center; width: 100%; height: 100%; position: relative; } //
Component coexistence when animation triggers , Is a block level element , The component is divided into up-down animation and rigid , Positioning allows components to be displayed on one line , .page1 { width: 100%; position: absolute;
top: 0px; left: 0; } // When entering .ani-enter-from { left: 100%; } // Entry process
.ani-enter-active { transition: all 0.5s linear; } // Leaving process .ani-leave-active {
transition: all 0.5s linear; transform-origin: center; } // When leaving .ani-leave-to {
left: -100%; } </style>
                                         home.vue
<template> <div class="home"> <div class="tabs"> <span v-for="(item, i) in
tabs" :key="item.id" :class="num == i ? 'active' : ''" @click="tabclick(i)" >{{
item.name }}</span > </div> <!-- lits --> <div class="list" v-for="item in
$store.state.data" :key="item.id" v-show="num == item.status" > <div
class="one"> <img :src="item.img" alt /> </div> <div class="two"> <p>{{
item.name }}</p> <p class="price">¥{{ item.price }}</p> <section
class="footer"> <p>{{ item.payNum }} Person payment </p> <p @click="add(item)">+</p>
</section> </div> </div> </div> </template> <script> import { useStore } from
"vuex"; import { ref, reactive } from "vue"; import { useRouter } from
"vue-router"; export default { components: {}, setup() { const store =
useStore(); const router = useRouter(); const num = ref(0); const tabs =
reactive([ { name: " recommend ", id: 0, }, { name: " Mother and baby ", id: 1, }, { name: " Shoe bag ", id: 2,
}, { name: " food ", id: 3, }, { name: " Digital ", id: 4, }, ]); function tabclick(i) {
num.value = i; } function add(item) { store.commit("add", item);
router.push("/About"); } store.dispatch("getData"); return { store, tabclick,
num, tabs, add, router, }; }, }; </script> <style lang="scss" scoped> .tabs {
display: flex; align-items: center; width: 100%; height: 50px;
background-color: #4b0082; span { flex-basis: 20%; height: 100%; line-height:
50px; color: #fff; text-align: center; } } .list { display: flex; width: 100%;
height: 130px; background-color: #fff; margin-bottom: 20px; .one { flex-basis:
30%; height: 100%; img { width: 100%; height: 100%; } } .two { flex-basis: 70%;
height: 100%; p { &:nth-child(1) { margin-top: 20px; } } .price { color:
#4b0082; margin: 15px 0 15px 15px; } .footer { padding: 0 15px; margin-top:
10px; display: flex; width: 100%; justify-content: space-between; p {
&:nth-child(2) { width: 40px; height: 25px; text-align: center; line-height:
25px; border-radius: 25px; background-color: #4b0082; font-size: 20px; color:
#fff; } } } } .active { color: #ec1f10 !important; } } </style>
                                    About.vue
<template> <div> <button @click="$router.go(-1)"> return </button> <transition-group
appear name="animate__animated animate__bounce"
enter-active-class="animate__zoomInDown"
leave-active-class="animate__zoomOutDown" > <!-- // The content to be animated is wrapped here To an element or delete a label -group
--> <!-- list --> <div class="list" v-for="item in $store.state.cardDate"
:key="item.id"> <div class="one"> <input type="checkbox"
:checked="item.checked" @change="ck(item.id)" /> <img :src="item.img" alt />
</div> <div class="two"> <p v-html="item.name"></p> <p v-html="item.price"></p>
</div> <div class="three"> <span @click="item.num > 1 ? item.num-- :
1">-</span> <span>{{ item.num }}</span> <span @click="item.num++">+</span>
</div> </div> <!-- End of animation --> </transition-group> </div> <button
@click="del"> Delete selected </button> <button> Selected {{ $store.getters.num }}</button>
<button> total {{ $store.getters.priceAll }}</button> <input type="checkbox"
v-model="$store.state.vmckall" @click="ckAll($event || e)" /> Select all </template>
<script> import { useStore } from "vuex"; import { onBeforeMount } from "vue";
import "animate.css"; export default { components: {}, setup() {
onBeforeMount(() => { // ... // No assignment in parentheses , Not in parentheses, the arrow function needs to accept a variable
store.commit("mount"); }); const store = useStore(); function del() {
store.commit("del"); } function ck(id) { store.commit("ck", id); } function
ckAll(e) { store.commit("ckAll", e.target.checked); } return { del, store, ck,
ckAll, }; }, }; </script> <style lang="scss" scoped> .list { display: flex;
justify-content: space-between; padding: 0 15px; align-items: center; width:
100%; height: 130px; background-color: #fff; .one { display: flex; img { width:
60%; height: 100%; margin-left: 10px; } } .two { display: flex; flex-direction:
column; justify-content: space-between; padding: 20px; } .three { display:
flex; flex-direction: column; span { display: inline-block; width: 20px;
height: 20px; text-align: center; line-height: 20px; background-color: #ccc;
&:nth-child(2) { margin: 10px 0; } } } } </style>
  Source code in the home page resources

epilogue :

I hope everyone can get off work early , No, bug, Accompany family and friends

Technology
©2019-2020 Toolsou All rights reserved,
Dynamic Simple registration login interface HTML+CSS+JQCSS Implement overflow display ellipsis 802.11 CCA and NAV mechanism Programmer refused due to low salary offer,HR become shame , Netizens instantly blew up ..abaqus Value of mass scaling factor _ABAQUS Mass scaling for Java Student information management system console version C Classic topics of language —— Insert a number into the sorted array Computer level 1 multi-point , How many points can I pass the computer test level 1 VINS-Fusion run kitti stereo and stereo+GPS data TS stay vue2 Writing in the project