vue 半场动画进入状态
2023-09-27 14:22:17 时间
<style>
.box{
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="加入购物车" @click="flag=!flag">
<!-- 使用元素把小球包裹起来 -->
<!-- @before-enter 动画入场之前,此时还没有入场哈
@enter 表示动画的执行时候的状态
@after-enter 表示动画结束之后的状态
-->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="box" v-show="flag"></div>
</transition>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
flag: false
},
methods: {
//动画钩子函数的第一个参数el 表示要执行的动画的那个DOM元素 是一个原生的BOM对象
// 大家可以认为 el 是通过 document.getElementById来获取的哦
beforeEnter(el){ //beforeEnte表示动画入场之前 此时动画还没有完全的开始
// 此时设置开始动画之前的起始样子
el.style.transform="translate(0,0)"
},
enter(el,done){// enter表示动画开始之后的样子
el.offsetWidth //这一句话没有实际性的作用 但是如果不写 效果就出不来
// 你可以认为 el.offsetWidth 是让你看见动画的效果
el.style.transform="translate(150px,450px)"
el.style.transition="all 1s ease"
//这里的done 起始就是afterEnter这个函数, 也就是说done是afterEnter函数的引用 它就会自动调用下面这个函数
done()
},
afterEnter(el){
// 动画完成之后 就会调用这个函数
this.flag=!this.flag //最终让这个小球消失 取反 让小球消失
}
},
})
</script>
相关文章
- 3分钟入门Vue.js,读取MS SQL数据库并显示html内容
- vue动画 <transition-group> 使用半场动画
- 精品spring boot+MySQL公选课在线选课系统vue
- 精品springboot+VUE的学生宿舍管理系统设计与实现
- Vue子组件调用父组件的方法
- vue 条件渲染方式
- Vue过渡与动画
- Vue或React项目配置@路径别名及智能提示方案
- Vue.js动画在项目使用的两个示例
- 解决vue+el使用this.$confirm,不能阻断代码往下执行
- vue里利用multi-items-input组件实现QQ邮箱收件人输入框功能?
- vue props的使用
- 前端学习之VUE基础五(Vue-Router):路由的基本概念、vue-router的基本使用、vue-router嵌套路由、vue-router动态路由匹配、vue-router编程式导航