Vue: transition animation
Vue animation Transition
2023-09-11 14:16:16 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content="bait bark"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Vehemence</title> <script src="dist/vue.global.js"></script> <style> .box { display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; } .blue { background-color: lavender; } .green { background-color: green; } .transition { transition: background-color 2s linear; } </style> </head> <body> <div id="vale"></div> <template id="t1"> <main class="box transition" :class="{green:isGreen,blue:isBlue}">main</main> <button @click="transition">btn</button> </template> <script> let vail = Vue.createApp({ data () { return { isBlue: true, isGreen: false, } }, template: '#t1', methods: { transition () { this.isBlue = !this.isBlue this.isGreen = !this.isGreen } } }).mount('#vale') </script> </body> </html>
相关文章
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- 【Vue】computed和methods的区别与互动(完整示例)
- 初步整合vue-element-admin和GitDataV两个Vue开源框架方案实现大数据可视化
- Vue——详解MVVM模型在vue中的使用
- Vue2.0 搭建Vue脚手架(vue-cli)
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Vue
- vue可视化图表 基于Echarts封装好的v-charts简介
- vue的图片裁剪vue-cropper
- Vue组件的封装
- 6 vue-cli mock数据
- 基于Hexo的个人博客搭建,对接SpringBoot + Vue搭建后台
- Vue 第三方库的使用
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- VUE图片懒加载-vue lazyload插件的简单使用
- Vue富文本编辑器的使用vue-quill-deitor
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- vue 组件
- Vue使用ElementUI的确认框进行删除操作(包含前后端代码)
- vue 定时器:setInterval和setTimeout使用实例及区别