Vue中的CSS动画
程序员文章站
2022-05-03 20:09:13
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态组件</title>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<style>
.fade-enter, .fade-leave-to{
opacity : 0;
}
.fade-enter-active, .fade-leave-active{
transition : opacity 3s;
}
</style>
</head>
<body>
<!--
过渡动画:
原理:动态添加css样式
如果name的值没写,默认就是 .v-enter .v-enter-active .v-leave-to .v-leave-active
-->
<div id="app">
<transition name="fade">
<div v-show="show">hello world</div>
</transition>
<button @click="handleChange">显示与隐藏</button>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
show : true
},
methods : {
handleChange : function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
推荐阅读
-
解说css中的margin属性缩写方式_html/css_WEB-ITnose
-
Vue 使用中的小技巧
-
CSS中scrollbar-base-color:#FF0000;的意思
-
css动画效果——初学者的看法:实现鼠标移入菜单栏文字下出现下划线
-
html中播放swf文件,怎么显示下面的开关面板的部分?_html/css_WEB-ITnose
-
跨平台移动开发 Xuijs超轻量级的框架+Emile CSS动画_html/css_WEB-ITnose
-
Vue2.x中的父组件传递数据至子组件的方法
-
在vue-music中关于Player播放器组件的使用说明
-
vue+element-ui中的图片获取与上传
-
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法