vue的作用域插槽、动态指令、动画和过渡的实现和引入插件

vue的作用域插槽

 含义：在调用子组件的时候想从父元素定义传递的DOM样式。

 形式：Vue.component('child',{

  template:`

                  

                    默认值（中间可以添加默认值）                     

//name表示的是在父组件中的标识

//solt代表的就是父组件中想要自定义传入的样式

      

`，

data:function(){

  return {

 

       list:[1,2,3,4]

}

}

 

 

 

Vue的动态指令

//对应的type值的改变应用与子组件的切换

 

V-once

 能提高性能，提高展示效率

把v-once填写在子组件的template 中 类似于属性

 

Vue中的css动画和原理

transition的展示
 
点击切换 

第一步：我们需要在有动画效果的html外面加一个transition的标签,vue会自动帮我们执行动画的流程。（vue从隐藏到显示时的活动）

在第一帧的时候会存在fade-enter、fade-enter-active

运行到第二帧的时候，我们的fade-enter会被移除，就会执行fade-enter-active的内容，同时vue会增加fade-enter-to。

最后vue会在执行完后，移除fade-enter-active和fade-enter-to

在我们需要从显示到隐藏时vue给的默认是fade-leave

Fade是因为我们设置了name=fade ，vue默认是v

 

在vue中如何使用animate.css

第一步在页面中引入css

第二步就是在transition增加自定义的属性 同时添加上animated 和需要设置的动画效果名

transition的展示

 

在vue中如何同时使用动画和过渡

transition的展示

增加的appear就是一个能让网页在初始化的时候显示动画

transition的展示

我们在style增加fade-enter-active等的css这样就能在初始的时候有过渡和动画效果了

:duration是自定义动画播放的时长

Type规定我们使用那个的设置动画时间为标准

 

Vue中的js动画与velocity.js结合

Transition 拥有生命周期钩子，我们可以利用before-enter绑定事件来进行显示

Enter也是一个生命后期钩子，它在before-enter执行完之后执行，一般动画效果我们都是写在enter钩子中

transition的展示
 
我们可以使用js的方式给transtion添加动画，当然leave也是同样的js就不赘述了。
handBefore:function(el){ //指的是当前的元素
el.style.color='red'
},
handEnter:function(el,done){//done是一个回调函数
setTimeout(()=>{
el.style.color='green'
},2000)
setTimeout(()=>{//在颜色改变后调用回调函数done
done()
},4000)
},
handAfter:function(el){
el.style.color='black'
}

我们可以在vue中引入velocity.js，借助与它我们可以通过简单的写法实现酷炫的效果

先下载文件，然后在文件中引入

handBefore:function(el){ //指的是当前的元素
el.style.opacity="0"
},
handEnter:function(el,done){//done是一个回调函数
Velocity(el,{
opacity:1
},{
duration:1000,
complate:done
})
},
handAfter:function(el){
console.log("动画结束")
}
我们需要在enter的生命钩子时，执行动画内容。此时的内容只需要简单填写样式就会出来。

vue中的组件动画的切换

      
transition的展示
       
transition的隐藏
     

在transition中添加其他元素，利用v-if来控制，同时设置key来不让vue在进行切换时不进行复用而达到动画切换。mode切换时根据给的值进行先隐藏再显示的执行顺序。

下面我们来进行组件的动画切换

transition我们通过子组件的动态指令 ：is来进行子组件的切换  

vue中的列表过渡

      

        {{item.title}}
      
     

添加的transiton-group相当于每次增加新内容时，会每个div都在外面包裹一个transition，从而达到动画的效果