简述vue+animate.css使用以及点击弹框从右到左动画

最新推荐文章于 2024-02-06 14:36:34 发布

阿成打怪升级

最新推荐文章于 2024-02-06 14:36:34 发布

阅读量1.7k

点赞数

分类专栏：问题类

本文链接：https://blog.youkuaiyun.com/qq_23027247/article/details/96498430

版权

问题类专栏收录该内容

36 篇文章

订阅专栏

首先：
npm install animate.css --save
然后路由从main.js引入
在这里插入图片描述
附上代码

<template>
  <div class="company-manager-register">
   <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight">
      <div v-if="show" class="test">
        <button @click="hide">点击隐藏</button>
      </div>
    </transition>
    <button @click="change">点击切换</button>
    </div>
</template>
<script >
export default{
  data(){
    return{
      show:false
    }
  },methods:{
    change(){
      this.show=!this.show;
    },
    hide(){
      this.show=!this.show;
    }
  }
}
</script>
<style>
.test{
  height: 400px;
  width: 80%;
  background: red;
  float: right;
  right: 0px;;
  position: absolute;
 
}
body{
  overflow: hidden;
}
</style>