vue-04-过渡动画、fetch、json-server

解决一个问题：

点击事件：v-on:click="show = !show"

“show”是显示,"！show"是不显示，中间为什么用“=”号呢?"或者"不应该是“||”这个符号吗

解答：

首先这里的@click="show=!show”是执行（this.show = !this.show）

这样一个语句而不是判断语句；相当于这样@click="clickToggle”

clickToggle () {this.show = !this.show}

 

vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

 

 

css过渡及动画

 

简单的css过渡动画：

html,body{ height: 100%; } /*进入时过渡状态*/ /*离开时的过渡状态*/ .v-enter-active, .v-leave-active { transition: opacity .5s; } /*进入时初始状态和离开的最终状态是一样的*/ .v-enter, .v-leave-to { transform: translateX(100px); opacity: 0; }

 

<div id="app"> <input type="button" value="Toggle" v-on:click="show = !show"/> <transition> <p v-if="show">hello</p> </transition> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

let vm = new Vue({ el:"#app", data:{ show:true } });

 

在进入离开的过程中有6个class状态

即过渡的类名：

v-enter：进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：进入过渡生效时的状态。在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：2.1.8版及以上 进入过渡的结束状态。在过渡/动画完成之后移除。

 

v-leave：离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：离开过渡生效时的状态。在整个离开过渡的阶段中应用，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：2.1.8版及以上 离开过渡的结束状态。在过渡/动画完成之后移除。

 

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

 

css过渡

transition 过渡的类名、标签

/*进入时过渡状态*/ .slide-fade-enter-active{ transition: all 3.3s ; } /*离开时的过渡状态*/ .slide-fade-leave-active { transition: all 3.8s cubic-bezier(1.0, 0.5, 0.8, 1.0); } /*进入时初始状态和离开的最终状态是一样的*/ .slide-fade-enter, .slide-fade-leave-to { transform: translateX(100px); opacity: 0; }

<div id="app"> <input type="button" value="Toggle" v-on:click="show = !show"/> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> let vm = new Vue({ el:"#app", data:{ show:true } });

 

css动画

animation：动画的类名

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

/*进入动画效果*/ .bounce-enter-active { animation: bounce-in 3.5s; } /*离开动画效果*/ .bounce-leave-active { animation: bounce-in 3.5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }

 

<div id="app"> <input type="button" value="Toggle" v-on:click="show = !show"/> <transition name="bounce" > <p v-if="show">Lorem ipsum dolor</p> </transition> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&