饿了么项目---10、（1）css3过渡、变换及3d变换、动画

本文链接：https://blog.csdn.net/qq_36400099/article/details/77385864

本博客参考书籍《HTML5权威指南》，为个人原创，转载请注明出处

一、过渡

过渡属性

transition-property ：应用过渡的属性，值为属性，值为all时，所有有变化的属性会有过渡效果
transition-duration:过渡的持续时间
transition-timing-function:过渡期间计算中间值的方式，默认ease ,其他值：ease-in、 ease-out、ease-in-out 、linear，还有cubic-bezier贝塞尔曲线,取值参考这里
transition-delay :过渡效果开始之前的延时，默认为0，值为时间

简写属性：

transition:
案例：

<template>
   <div class="ratings">
        <div class='divBi'>shanghai </div>
   </div>
</template>
<script>
export default {
  name: 'ratings',
  data(){
    return {
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scope>
    .divBi
        margin:24px
        width:100px
        height:100px
        background:pink
        transition:all .8s ease
    .divBi:hover
        width:100px
        height:100px
</style>

二、动画（增强的过渡）

css动画本质上是增强的过渡，在过渡中，有更多的选择、更多的控制及灵活性

动画属性

animation-name：指定动画名称
animation-duration:动画的持续时间
animation-timing-function:动画期间计算中间值的方式，默认ease ,其他值：ease-in、 ease-out、ease-in-out 、linear，还有cubic-bezier贝塞尔曲线,取值参考这里
animation-delay :动画效果开始之前的延时，默认为0，值为时间
animation-iteration-count:动画播放次数，默认为1
animation-direction:是否返向播放，默认为normal,值为alternate时，遇到偶数次为向前，遇到基数次时为向后

简写属性

animation：

案例：

<template>
   <div class="ratings">
        <div class='divBi'>shanghai </div>
   </div>
</template>

<script>
export default {
  name: 'ratings',
  data(){
    return {
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scope>
    .divBi
        margin:24px
        width:100px
        height:100px
        background:pink

    .divBi:hover
        animation:hoverwid 2s ease
        -webkit-animation:hoverwid 2s ease
    @-webkit-keyframes hoverwid
        to
            width:140px
            height:150px

</style>

三、变换

css变换为元素应用线性变换，包括：旋转，缩放，倾斜，平移。推荐张鑫旭的博客

变换属性

函数	描述
平移 translate3d(x,y,z)	定义 3D 转化。
平移 translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
平移 translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
平移 translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
缩放 scale3d(x,y,z)	定义 3D 缩放转换。
缩放 scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
缩放 scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
缩放 scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
旋转 rotate3d(x,y,z,angle)	定义 3D 旋转。
旋转 rotateX(angle)	定义沿 X 轴的 3D 旋转。
旋转 rotateY(angle)	定义沿 Y 轴的 3D 旋转。
旋转 rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

关于透视案例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#div1
{
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding:10px;
    border: 1px solid black;
    perspective:150;
    -webkit-perspective:150; /* Safari and Chrome */
}

#div2
{
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    transform: rotateX(45deg);
    -webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>

</body>
</html>

使用vuejs做平移

-要求：点击按钮，从左下角方向移出或隐藏到右上角固定位置
- 点击时从左下角出现
- 小方块的位置固定在右上角，动画开始前enter 时，平移到左下角位置,translate3d取值：向左为负数，向下为正，透明度opacity为0
- 动画开始时，过渡transition:all 2s
- 点击时向左下角隐藏
- 小方块的位置固定在右上角，动画离开后leave-to ，平移到左下角位置,translate3d取值：向左为负数，向下为正，透明度opacity为0
- 动画离开过程中，过渡transition:all 2s

<template>
   <div class="ratings">
    <button @click='slidelit'>移动小方块</button>
    <transition name='slide'>
      <div class='lit' v-show='lit_show'></div>
    </transition>
   </div>
</template>

<script>

export default {
  name: 'ratings',
  data(){
    return {
      lit_show :true
    }
  },
  methods:{
    slidelit(){
      this.lit_show = !this.lit_show 
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scope>
     .lit
       position:fixed
       left:250px
       bottom:400px
       width:50px
       height:50px
       background:pink
       &.slide-enter-active, &.slide-leave-active
         transition:all 2s
       &.slide-enter,&.slide-leave-to
         opacity:0
         transform:translate3d(-200px,200px,0)

</style>