CodeW3C ການສອນຫຼັງທາງອອນລາຍ
ການສອນ HTML
Browser Script
Server Script
ການສອນປັດຈຸບັນ
ການສອນ XML
ຄູ່ມືການສ້າງເວັບໄຊ
ຄູ່ມືການປົກຄອງ
Course Schedule
JS Reference Manual
JS Reference Manual (Category Sorting)
JS Reference Manual (Alphabetical Sorting)
JavaScript
JS Array
JS Boolean
JS Class
JS Date
JS Error
JS Global
JS JSON
JS Map
JS Math
JS Number
JS Promise
JS RegExp
JS Set
JS String
JS Object
JS Operator
JS Operator Precedence
JS Statement
JS Type Array
Window
Window Object
Window Console
Window History
Window Location
Window Navigator
Window Screen
HTML DOM
HTML Document
HTML Element
HTML Attribute
HTML Event
HTML Event Object
HTML Collection
HTML NodeList
HTML DOMTokenList
HTML Style
Web API
API Canvas
API Console
API Fetch
API Fullscreen
API Geolocation
API History
API MediaQueryList
API Storage
API Validation
API Web
ອັບພາວະ HTML
<a>
<abbr>
<address>
<area>
<article>
<aside>
<audio>
<b>
<base>
<bdo>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<head>
<header>
<h1> - <h6>
<hr>
<html>
<i>
<iframe>
<img>
<ins>
<input> button
<input> checkbox
<input> color
<input> date
<input> datetime
<input> datetime-local
<input> email
<input> file
<input> hidden
<input> image
<input> month
<input> number
<input> password
<input> radio
<input> range
<input> reset
<input> search
<input> submit
<input> text
<input> time
<input> url
<input> week
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<menuitem>
<meta>
<meter>
<nav>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strong>
</a></li> <li><a href="/lo/jsref/dom_obj_time.html" title="ໂອບເອັມໄອເດີ້ມ ສະເປັກເວລາ"><time></a></li> <li><a href="/lo/jsref/dom_obj_title.html" title="ໂອບເອັມໄອເດີ້ມ ສະເປັກຫົວ"><title></a></li> <li><a href="/lo/jsref/dom_obj_track.html" title="ໂອບເອັມໄອເດີ້ມ ສະເປັກສະຖານ"><track></a></li> <li><a href="/lo/jsref/dom_obj_u.html" title="ໂອບເອັມໄອເດີ້ມ ສະເປັກບາງ"><u></a></li> <li><a href="/lo/jsref/dom_obj_ul.html" title="ໂອບເອັມໄອເດີ້ມ ສະເປັກສະແພງ"><ul></a></li> <li><a href="/lo/jsref/dom_obj_var.html" title="ໂອບເອັມໄອເດີ້ມ ສະເປັກບັນດາ"><var></a></li> <li><a href="/lo/jsref/dom_obj_video.html" title="ໂອບເອັມໄອເດີ້ມ ສະເປັກວິດີໂອ"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/lo/jsref/obj_cssstyledeclaration.html" title="ໂອບເອັມໄອເດີ້ມ ສະເປັກສະແຕກຮູບແບບ">CSSStyleDeclaration</a></li> <li><a href="/lo/jsref/jsref_type_conversion.html" title="ການປ່ຽນຊະນິດຂອງເຈັສສະເປັກ">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/lo/howto/index.html" title="ກະບະກອງບາງວັດສະວະຂອງ CodeW3C.com">ກະບະກອງບາງວັດສະວະຂອງ CodeW3C.com</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>Style transition 属性</h1> <div class="prenextnav-ref"> <ul> <li> ບໜ້າຫນັງ <a href="/lo/jsref/prop_style_transformstyle.html" title="ລັກສະນະສະແຕກຮູບແບບ transformStyle">transformStyle</a></li> <li> ບໜ້າຫນັງ <a href="/lo/jsref/prop_style_transitionproperty.html" title="ລັກສະນະສະແຕກຮູບແບບ transitionProperty">transitionProperty</a></li> <li> 返回上一层 <a href="/lo/jsref/dom_obj_style.html" title="HTML DOM Style Object">HTML DOM Style Object</a></li> </ul> </div> <div> <h2>定义和用法</h2> <p><code>transition</code> 属性是四个过渡属性的简写属性：</p> <ul> <li><a href="/lo/jsref/prop_style_transitionproperty.html" title="ລັກສະນະສະແຕກຮູບແບບ transitionProperty">transitionProperty</a></li> <li><a href="/lo/jsref/prop_style_transitionduration.html" title="ລັກສະນະສະແຕກຮູບແບບ transitionDuration">transitionDuration</a></li> <li><a href="/lo/jsref/prop_style_transitiontimingfunction.html" title="ລັກສະນະສະແຕກຮູບແບບ transitionTimingFunction">transitionTimingFunction</a></li> <li><a href="/lo/jsref/prop_style_transitiondelay.html" title="ລັກສະນະສະແຕກຮູບແບບ transitionDelay">transitionDelay</a></li> </ul> <p class="note"><span>注释：</span>请始终规定 <a href="/lo/jsref/prop_style_transitionduration.html" title="ລັກສະນະສະແຕກຮູບແບບ transitionDuration">transitionDuration 属性</a>，否则持续时间为 0，过渡将无效。</p> <h3>另请参阅：</h3> <p>CSS 参考手册：<a href="/lo/cssref/pr_transition.html" title="ລັກສະນະສະແຕກຮູບແບບ transition">ບັນຊີ transition</a></p> </div> <div> <h2>实例</h2> <p>将鼠标悬停在 div 元素上以逐渐改变其外观：</p> <pre class="language-js"> document.getElementById("myDIV").style.transition = "all 2s"; </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=jsck_style_transition">ທ້າທາຍຕົວເອງ</a></p> </div> <div> <h2>ສັນຍາວິທະຍາສານ</h2> <p>ການຕອບກັບ transition:</p> <pre><i>object</i>.style.transition</pre> <p>ການຕັດສິນບັນຊີ transition:</p> <pre><i>object</i>.style.transition = "<i>property</i> <i>duration</i> <i>timing-function</i> <i>delay</i>|initial|inherit"</pre> <h3>ຄວາມລະອຽດບັນຊີ</h3> <table class="dataintable"> <tr> <th style="width: 25%;">ຄວາມລະອຽດ</th> <th>ການອະທິບາຍ</th> </tr> <tr> <td><i>transitionProperty</i></td> <td>ກຳນວຍການການຕັ້ງການການປ່ຽນແປງທີ່ຕ້ອງມີວັນນະຍຸດຫນັງນັ້ນຫນັງນັ້ນ.</td> </tr> <tr> <td><i>transitionDuration</i></td> <td>ກຳນວຍການການຕັ້ງການການປ່ຽນແປງທີ່ຕ້ອງມີວັນນະຍຸດຫນັງນັ້ນຫນັງນັ້ນ.</td> </tr> <tr> <td><i>transitionTimingFunction</i></td> <td>ກຳນວຍການການຕັ້ງການການປ່ຽນແປງ.</td> </tr> <tr> <td><i>transitionDelay</i></td> <td>ການອອກຂໍ້ສັນຍາການຕັ້ງການການປ່ຽນແປງ.</td> </tr> <tr> <td>initial</td> <td>ຕັດສິນບັນຊີນີ້ໃຫ້ເປັນຄຳຕອບກັບຄົນທຳອິດ. ບັງຄັບການບັງຄັບ: <a href="/lo/cssref/css_initial.html" title="ລັກສະນະສະແຕກຮູບແບບ initial">initial</a>.</td> </tr> <tr> <td>inherit</td> <td>ຍັງພັດທະນາບັນຊີນີ້ຈາກປະກອບສ່ວນຜູ້ແທນ. ບັງຄັບການບັງຄັບ: <a href="/lo/cssref/css_inherit.html" title="ລັກສະນະສະແຕກຮູບແບບ inherit">inherit</a>.</td> </tr> </table> </div> <div> <h2>ຂໍ້ມູນດ້ານເຕັກນິກ</h2> <table class="definition-usage"> <tr> <th style="width: 25%;">ຄຳຕອບກັບຄົນທຳອິດ:</th> <td>all 0 ease 0</td> </tr> <tr> <th>ຄຳຕອບກັບ:</th> <td>ສະເພດຄຳເວົ້າທີ່ສະແດງປະກອບສ່ວນຂອງປະກອບສິ່ງ. <a href="/lo/cssref/pr_transition.html" title="ລັກສະນະສະແຕກຮູບແບບ transition">ບັນຊີ transition</a>.</td> </tr> <tr> <th>ສະບັບ CSS:</th> <td>CSS3</td> </tr> </table> </div> <div> <h2>ການສະໜັບສະໜູນບັນຊີບັນຍາຍ</h2> <p>ຈຳນວນທີ່ຢູ່ໃນຕາຕະລາງສະແດງວ່າສະບາຍການອັບພະຍາຍາມຂອງບັນຊີບັນຍາຍທີ່ສະໜັບສະໜູນຄັບຄັດດັ່ງກ່າວນີ້.</p> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>Safari</td> <td>Opera</td> </tr> <tr> <td>26.0</td> <td>10.0</td> <td>16.0</td> <td>6.1</td> <td>12.1</td> </tr> </table> </div> <div class="prenextnav-ref"> <ul> <li> ບໜ້າຫນັງ <a href="/lo/jsref/prop_style_transformstyle.html" title="ລັກສະນະສະແຕກຮູບແບບ transformStyle">transformStyle</a></li> <li> ບໜ້າຫນັງ <a href="/lo/jsref/prop_style_transitionproperty.html" title="ລັກສະນະສະແຕກຮູບແບບ transitionProperty">transitionProperty</a></li> <li> 返回上一层 <a href="/lo/jsref/dom_obj_style.html" title="HTML DOM Style Object">HTML DOM Style Object</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> 工具箱 </center><h3> <h5 id="tools_reference"><a href="/lo/jsref/index.html">ຄູ່ມື JavaScript ແລະ HTML DOM</a></h5> <h5 id="tools_example"><a href="/lo/js/js_examples.html">JavaScript 实例</a></h5> <h5 id="tools_quiz"><a href="/lo/js/js_quiz.html">JavaScript 测验</a></h5> <h5 id="tools_tutorial"><a href="/lo/js/index.html">JavaScript 教程</a></h5> </div> <div><h3><center> 赞助商链接 </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com 提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。 </p> <p id="p2"> <a href="/lo/about/index.html" title="ກ່ຽວກັບ CodeW3C.com">ກ່ຽວກັບ CodeW3C.com</a> <a href="/lo/about/about_helping.html" title="ຊ່ວຍເຫຼືອ CodeW3C.com">ຊ່ວຍເຫຼືອ CodeW3C.com</a> <a href="/lo/about/about_use.html" title="ກ່ຽວກັບການນໍາໃຊ້">ຂໍ້ກຳນົດການນໍາໃຊ້</a> <a href="/lo/about/about_privacy.html" title="ກ່ຽວກັບຄວາມລັບຄວາມລຽບຂອງພວກເຮົາ">ຂໍ້ກຳນົດຄວາມລັບ</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="ສະຫຼັບການໂດຍ Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>