1、安装
cnpm install animate.css --save2、使用
2-1、新建animateCSS.js
const animateCSS = (element, animation, prefix = 'animate__') =>// We create a Promise and return itnew Promise((resolve, reject) => {const animationName = `${prefix}${animation}`;const node = document.querySelector(element);node.classList.add(`${prefix}animated`, animationName);// When the animation ends, we clean the classes and resolve the Promisefunction handleAnimationEnd(event) {event.stopPropagation();node.classList.remove(`${prefix}animated`, animationName);resolve('Animation ended');}node.addEventListener('animationend', handleAnimationEnd, {once: true});});export default animateCSS;2-2、动态添加动画
showItemDetail(item) {this.showOver = true;this.selectItem = item;animateCSS('.big_img', 'zoomIn').then((message) => {this.bigImg=false;//this.coverBox=trueanimateCSS('.cover_box', 'flipInY').then((message) => {});});},3、多动画实例
<template><div class="blessingTree wh100"><navBartitle="祈福树":leftArrowFlag="true"rightText="介绍"@clickNavBarRight="onClickRight"/><div class="content"><div class="content_main"><div class="bless_list"><divclass="bless_item"v-for="(item, index) in blesss":key="index"@click="showItemDetail(item)"><img class="item_little_img" :src="item.little" alt="" /></div></div></div><div class="content_bottom"><div class="bottom_btn my_bless" @click="goMyBless"><span>我的祈福</span></div><div class="bottom_btn go_bless" @click="goBless"><span>去祈福</span></div></div></div><van-overlay class="overlay" :show="show" @click="show = false"><div class="wrapper" @click.stop><div class="box"><div class="box_title"><span>介绍</span></div><div class="box_content"><h4>1.点击许愿牌可以看到大家的愿望</h4><h4>2.点击左下角我的祈福可以查看自己的 祈福内容</h4><h4>3.点击右下角去祈福，可以发布祈福内容发布内容不可修改，要认真对待每一次 祈福</h4></div></div><van-icon @click="show = false" class="close_btn" name="close" /></div></van-overlay><van-overlay class="cover" :show="showOver" @click="showOver=false"><div class="wrapper" @click.stop><div class="anmiate_box" v-show="showOver"><div class="big_img" v-show='bigImg'><img class="bigImg" :src="selectItem.big" alt="" /></div><div class="cover_box" v-show='coverBox' @click="closeCoverBox"><divclass="cover_img_box":style="{ 'background-image': 'url(' + selectItem.cover + ')' }"><div class="cover_info"><p>{
{ selectItem.des }}</p></div><div class="name_box"><div class="dot"></div><span>{
{ selectItem.name }}</span><div class="dot"></div></div></div><div class="collect_box" @click.stop="changeCollected"><van-icon v-if="selectItem.isCollected" name="like-o" /><van-icon v-else name="like" /><span>{
{ selectItem.collectNums }}人祝福</span></div></div></div></div></van-overlay><!-- <div class="overlaybox" v-show="showOver" @click="showOver = false"></div> --></div>
</template>
<script>
import animateCSS from "@/utils/animateCSS";
import navBar from "@/components/navBar";
export default {data() {return {show: false,showOver: false,bigImg: true,coverBox:false,selectItem: {},blesss: [{id: 1,little: require("../../../../assets/imgs/bless/aiqing.png"),cover: require("../../../../assets/imgs/bless/aiqingcover.png"),big: require("../../../../assets/imgs/bless/aiqing_.png"),des: "爱情啊，我爱了",collectNums: 7,isCollected: false,name: "罗杰",title: "爱情",},{id: 2,little: require("../../../../assets/imgs/bless/caiyun.png"),cover: require("../../../../assets/imgs/bless/caiyuncover.png"),big: require("../../../../assets/imgs/bless/caiyun_.png"),des: "希望工作一切顺利",collectNums: 5,isCollected: false,name: "李博儿",title: "财运",},{id: 3,little: require("../../../../assets/imgs/bless/jiankang.png"),cover: require("../../../../assets/imgs/bless/jiankangcover.png"),big: require("../../../../assets/imgs/bless/jiankang_.png"),des: "健康永久，安详快乐",collectNums: 3,isCollected: false,name: "我",title: "健康",},{id: 4,little: require("../../../../assets/imgs/bless/pingan.png"),cover: require("../../../../assets/imgs/bless/pingancover.png"),big: require("../../../../assets/imgs/bless/pingan_.png"),des:"??愿天下的父母身体安康??朋友们一切顺利??孩子学业有成??有情人终成眷属???",collectNums: 7,isCollected: false,name: "苏娜",title: "平安",},{id: 5,little: require("../../../../assets/imgs/bless/shiye.png"),cover: require("../../../../assets/imgs/bless/shiyecover.png"),big: require("../../../../assets/imgs/bless/shiye_.png"),des: "祝一家人平安快乐！",collectNums: 3,isCollected: false,name: "卡斯",title: "事业",},{id: 6,little: require("../../../../assets/imgs/bless/xueye.png"),cover: require("../../../../assets/imgs/bless/xueyecover.png"),big: require("../../../../assets/imgs/bless/xueye_.png"),des: "学业有成",collectNums: 7,isCollected: false,name: "路飞",title: "学业",},],};},components: {navBar,},created() {},methods: {closeCoverBox(){this.coverBox=false;this.showOver=false;this.bigImg=true},changeCollected(){this.selectItem.isCollected=!this.selectItem.isCollected},showItemDetail(item) {this.showOver = true;this.selectItem = item;animateCSS('.big_img', 'zoomIn').then((message) => {this.bigImg=false;//this.coverBox=trueanimateCSS('.cover_box', 'flipInY').then((message) => {});});},onClickRight() {this.show = true;},goMyBless() {this.$router.push('/my/myBlessing')},goBless() {this.$router.push('/my/blessingCard')},},
};
</script>
<style lang="scss" scoped>
.blessingTree {display: flex;flex-direction: column;background-color: #eff2f7;background: url("../../../../assets/imgs/tree.png") no-repeat;background-size: 100% 100%;position: relative;.overlaybox {position: absolute;width: 100%;left: 0;top: 0;background: rgba(0, 0, 0, 0.4);height: 100%;z-index: 2;}.anmiate_box {position: absolute;width: 100%;// left: 0;// top: 0;height: 100%;display: flex;justify-content: center;align-items: center;z-index: 3;.big_img {width: 2.7rem;height: 3.7rem;position: absolute;img {width: 100%;height: 100%;}}.cover_box{width: 100%;height: 100%;padding-top: 1rem;.cover_img_box{width: 100%;height: 3.7rem;position: relative;background-size: auto 100%;background-repeat: no-repeat;background-position:80%;.cover_info{position: absolute;width: 1.85rem;height: 2.97rem;top:0.72rem;left:0.82rem;text-align: left;padding:0.1rem;text-align: justify;font-size: 14px;line-height: 0.2rem;}.name_box{position: absolute;bottom: 0.1rem;right: 1.2rem;font-size: 12px;padding: 0.05rem 0.1rem;color: #fff;display: flex;align-items: center;border-radius: 12px;background-color: #48c479;span{margin:0 0.03rem;}.dot{width: 0.04rem;height: 0.04rem;background: #fff;border-radius: 50%;}}}.collect_box{display:flex;font-size: 14px;box-sizing: border-box;background-color: #fff;padding: 0.1rem 0.2rem;position: absolute;bottom: 1.5rem;left: 50%;-webkit-transform: translateX(-60%);transform: translateX(-60%);border-radius: 155px;-webkit-box-align: center;-webkit-align-items: center;align-items: center;/deep/ .van-icon{color: crimson;font-size: 20px;margin-right: 0.07rem;}}}}.content {flex: 1;padding: 0.25rem 0.15rem;display: flex;flex-direction: column;.content_main {flex: 1;display: flex;flex-direction: column;justify-content: center;.bless_list {display: flex;flex-wrap: wrap;justify-content: space-around;.bless_item {width: 0.65rem;height: 1.07rem;margin: 0.3rem 0.15rem;img {width: 100%;height: 100%;}}.bless_item:nth-child(2n) {margin-top: 0.15rem;}}}.content_bottom {display: flex;align-items: center;justify-content: space-between;.bottom_btn {margin: 0 0.1rem;flex: 1;height: 0.44rem;display: flex;justify-content: center;align-items: center;font-size: 14px;color: #fff;border-radius: 0.08rem;}.my_bless {background-color: #efb835;}.go_bless {background-color: #07bf67;}}}.overlay {display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;.box {width: 3rem;.box_title {width: 100%;height: 0.5rem;background: $defaultColor;text-align: center;line-height: 0.5rem;color: #fff;font-size: 16px;}.box_content {width: 100%;height: 2rem;text-align: left;background: #fff;padding: 0.15rem 0.23rem 0;h4 {font-size: 14px;line-height: 0.25rem;}}}.close_btn {color: #fff;font-size: 40px;margin: 0.15rem auto 0;}}.cover {display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;.wrapper{width: 100%;height: 100%;}}
}
</style>