[Vue.js]学习笔记-Vue.js过渡-css过渡

范范 · 发表于 2019-1-6 22:08:03

导读部分

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html

教程部分

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>

运行结果：

点击点我按钮后，可以看到， ‘苏飞论坛’字样隐藏，并增加了淡入淡出的效果。

Amy · 发表于 2019-1-7 08:38:04

强烈支持楼主ing……

站长苏飞 · 发表于 2019-1-7 08:38:05

我只是路过打酱油的。

惜 · 发表于 2019-1-7 14:40:44

我只是路过打酱油的。

liu · 发表于 2019-1-8 17:08:40

强烈支持楼主ing……

		自动登录	找回密码
密码			马上注册

[vue.js学习笔记] [Vue.js]学习笔记-Vue.js过渡-css过渡

相关帖子