[Vue.js]学习笔记-Vue.js过渡-css过渡
导读部分
教程部分
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 另: Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。
过渡的语法格式:
[HTML] 纯文本查看 复制代码 <transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
上个内容我们主要学习了过渡的语法,以及简单的用法, 本次我们学习css过渡。
在我们平时的开发中, 通常我们都是使用储css过渡来实现效果。
下面我门还是通过实例来学习下css过渡的用法,以及效果。
实例:
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name="slide-fade">
<p v-if="show">苏飞论坛</p>
</transition>
</div>
<script type = "text/javascript">
new Vue({
el: '#databinding',
data: {
show: true
}
})
</script>
</body>
</html>
运行结果:
点击点我按钮后, 可以看到, ‘苏飞论坛’字样隐藏, 并增加了淡入淡出的效果。
|