vue.js过度&动画、混入&插件
1.vue 过度动画
1.过度
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。
语法格式：
<transition name = "nameoftransition"><div></div>
</transition>
例如：
<div id="databinding"><button v-on:click="show = !show">点我</button>
<transition name="fade">
<p v-show="show" v-bind:style="styleobj">动画实例</p>
</transition>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
fontSize: '30px',
color: 'red'
}
},
methods: {}
});
</script>
实例中通过点击 "点我" 按钮将变量 show 的值从 true 变为 false。如果为 true 显示子元素 p 标签的内容。
过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
2.CSS过度
通常我们都使用 CSS 过渡来实现效果。
<div id="databinding"><button v-on:click="show = !show">点我</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#databinding',
data: {
show: true
}
})
</script>
3.CSS动画
CSS 动画用法类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
<div id="databinding"><button v-on:click="show = !show">点我</button>
<transition name="bounce">
<p v-if="show">vue 6！！！</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#databinding',
data: {
show: true
}
})
</script>
4.自定义过渡的类名
我们可以通过以下特性来自定义过渡类名：
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库结合使用。
<div id="databinding"><button v-on:click="show = !show">点我</button>
<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
<p v-if="show">vue 6！！！</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#databinding',
data: {
show: true
}
})
</script>
5. 同时使用过渡和动画
Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。
但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
6. 显性的过渡持续时间
可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
<transition :duration="1000">...</transition>
也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>7. 初始渲染的过渡 appear
可以结合钩子和上面的自定义class属性使用。
<transition appear><!-- ... -->
</transition>
8.JS钩子
可以在属性中声明 JavaScript 钩子
<transitionv-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 进入中
// --------
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
一个使用 Velocity.js 的简单例子：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
<div id="databinding">
<button v-on:click="show = !show">点我</button>
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
<p v-if="show">VUE 666666666！！！</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#databinding',
data: {
show: false
},
methods: {
beforeEnter: function(el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function(el, done) {
Velocity(el, {
opacity: 1,
fontSize: '1.4em'
}, {
duration: 300
})
Velocity(el, {
fontSize: '1em'
}, {
complete: done
})
},
leave: function(el, done) {
Velocity(el, {
translateX: '15px',
rotateZ: '50deg'
}, {
duration: 600
})
Velocity(el, {
rotateZ: '100deg'
}, {
loop: 2
})
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, {
complete: done
})
}
}
})
</script>
</body>
</html>
9. 多个元素过度
我们可以设置多个元素的过渡，一般列表与描述：需要注意的是当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
Vue还提供了过度模式来实现不同的过度效果：
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
<div id="databinding"><button v-on:click="show = !show">点我</button>
<transition name="bounce" mode="in-out">
<p v-if="show" key="A">vue 6A！！！</p>
<p v-else key="B">vue 6B！！！</p>
</transition>
</div>
<script type="text/javascript">
new Vue({
el: '#databinding',
data: {
show: true
}
})
</script>
2.混入
混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
<div id="databinding"></div><script type="text/javascript">
var vm = new Vue({
el: '#databinding',
data: {},
methods: {},
});
// 定义一个混入对象
var myMixin = {
created: function() {
this.startmixin()
},
methods: {
startmixin: function() {
document.write("欢迎来到混入实例");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
2.1选项合并
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
<div id="databinding"></div><script type="text/javascript">
var mixin = {
created: function() {
document.write('混入调用' + '<br>')
}
}
new Vue({
mixins: [mixin],
created: function() {
document.write('组件调用' + '<br>')
}
});
</script>
结果：
混入调用
组件调用
如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高。如下实例，Vue 实例与混入对象的 methods 选项都包含了相同的函数：
<div id="databinding"></div><script type="text/javascript">
var mixin = {
methods: {
hellworld: function() {
document.write('HelloWorld 方法' + '<br>');
},
samemethod: function() {
document.write('Mixin：相同方法名' + '<br>');
}
}
};
var vm = new Vue({
mixins: [mixin],
methods: {
start: function() {
document.write('start 方法' + '<br>');
},
samemethod: function() {
document.write('Main：相同方法名' + '<br>');
}
}
});
vm.hellworld();
vm.start();
vm.samemethod();
</script>
结果：
HelloWorld 方法
start 方法
Main：相同方法名
2.2全局混入
也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。
<script type="text/javascript">// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function() {
var myOption = this.$options.myOption
if (myOption) {
document.write(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
</script>
3.插件
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：
添加全局方法或者属性。如: vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
1.使用插件
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
// 调用 `MyPlugin.install(Vue)`Vue.use(MyPlugin)
new Vue({
// ...组件选项
})
也可以传入一个可选的选项对象：
Vue.use(MyPlugin, { someOption: true })Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。
2.开发插件
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：(我自己测试调用Vue.use的时候会调用Install方法，多次调用只会调用1次)
例如：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
5 isNotNull: {{ isNotNull(5) }}
<br/> 5 double is: {{ double(5) }}
<br/>
<input v-focus />
<input />
</div>
<script>
let MyPlugin = {};
MyPlugin.install = function(Vue, options) {
console.log(options);
// 1. 添加全局方法或属性
Vue.isNotNull = function(value) {
return value ? false : true;
}
// 2. 添加全局指令
Vue.directive('focus', {
inserted: function(el) {
el.focus();
}
})
// 3. 注入混入:一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
Vue.mixin({
created: function() {
// $options用于获取自定义的属性
var myProp = this.$options.myProp;
if(myProp) {
document.write("myProp: " + myProp);
}
}
})
// 4. 添加实例方法
Vue.prototype.$double = function(value) {
return value * 2;
}
}
Vue.use(MyPlugin, {
name: "test"
});
var app = new Vue({
el: '#app',
myProp: "我的属性",
data: {
msg: 'Hello Vue!'
},
methods: {
isNotNull(value) {
return Vue.isNotNull(value);
},
double(value) {
return this.$double(value);
}
}
})
</script>
</body>
</html>
结果：
控制台：
在使用过程中发现：使用一些第三方组件需要用Vue.use，比如Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。因为axios没有Install，直接发布的对象。
以上是 vue.js过度&动画、混入&插件 的全部内容， 来源链接： utcz.com/z/375986.html
