微信小程序界面设计小程序中CSS3样式精通课程-transition过渡-transition-property

爱被打了一巴掌 2024-02-19 16:19 40阅读 0赞

### transition过渡-transition-property ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
通用语法  
浏览器支持  
![在这里插入图片描述][20190122161024587.png]Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-property 属性。  
Safari 支持替代的 -webkit-transition-property 属性。  
注释：Internet Explorer 9 以及更早版本的浏览器不支持 transition-property 属性。  
定义和用法  
transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。  
提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。  
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。  
默认值： all  
继承性： no  
版本： CSS3  
JavaScript 语法： object.style.transitionProperty=“width,height”  
语法

transition-property: none|all|property;

值 描述  
none 没有属性会获得过渡效果。  
all 所有属性都将获得过渡效果。  
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。  
实例  
把鼠标指针放到 div 元素上，会产生带有平滑改变元素宽度的过渡效果：

<!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:blue;
    transition-property: width;
    transition-duration: 2s;
    -moz-transition-property: width; /* Firefox 4 */
    -moz-transition-duration: 2s; /* Firefox 4 */
    -webkit-transition-property: width; /* Safari and Chrome */
    -webkit-transition-duration: 2s; /* Safari and Chrome */
    -o-transition-property: width; /* Opera */
    -o-transition-duration: 2s; /* Opera */
    }
    
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    
    <div></div>
    
    <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
    
    <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
    
    </body>
    </html>

效果图  
![微信小程序界面设计小程序中CSS3样式精通课程-transition过渡-transition-property][CSS3_-transition_-transition-property]

### 小程序应用 ###

> Wxml代码

<view class='c01'>
    01
    </view>
    
    <view>请把鼠标指针移动到蓝色的元素上，就可以看到过渡效果。高度变为300px</view>

> Wxss代码

.c01{
      width:100px;
      height:100px;
      background:blue;
      transition-property:height;
      transition-duration:5s;
      transition-delay:2s;
    }
    .c01:hover{
      height: 300px;
    }

效果图 防采集标记：黄菊华老师的课程和资料

![微信小程序界面设计小程序中CSS3样式精通课程-transition过渡-transition-property][CSS3_-transition_-transition-property 1]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中CSS3样式精通课程][-_CSS3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190122161024587.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/888eb629df654e6d803f8663ba270294.png
[CSS3_-transition_-transition-property]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b2c1cf624cd645ec8b40dc0e2b825293.png
[CSS3_-transition_-transition-property 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/70805c4d2afa426db45b789f9d4ad31c.png
[-_CSS3]: https://ke.qq.com/course/371155?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/080ff4a22d594495aad539062d8355ac.png