学习前端js核心Vue 之 directives(自定义命令) transition (过渡动画 js) 个人备忘笔记

<template>

<div id="com">

<!--  before-enter  开始进入  enter 完全进入 leave 完全出去 ：css=“false” 忽略css 因为目前是js过渡动画 不是样式动画-->

<transition

@before-enter="before"

@enter="enter"

@leave="leave"

:css="false" >

<p v-show="state" v-txt="msg"></p>

</transition>

<button @click="state = !state">change</button>

</div>

<template>

<javascript>
//引入jquery  先在项目的index.html 引入jquery依赖
import $ from 'jquery'
export default {
name: 'com',
data () {
return {
msg: 'welcome you to vue',
state: true
}
},
methods: {
before (el) {
$(el).css({
left: '-300px',
background:'red',
opacity: 0
})
},
enter (el, done) {
$(el).animate({
left: 0,
opacity: 1
}, {
duration: 1500,
completa: done
})
},
leave (el, done) {
$(el).animate({
left: '800px',
opacity: 0
}, {
duration: 1500,
completa: done
})
}
},
directives: {
txt: {
inserted (el, vals) {
el.innetHTML = vals.value
}
}
}
}
</javascript>