如何使用 JavaScript 设置这四个过渡属性?
在本教程中，我们将学习如何使用 JavaScript 设置这四个过渡属性。
transition 是用于设置元素过渡效果的 CSS 属性。它是以下属性的简写:transitionProperty、transitionDuration、transitionTimingFunction 和 transitionDelay。
transitionProperty 用于指定应具有过渡效果的 CSS 属性名称。transitionDuration 属性用于指定完成过渡的总时间。transitionTimingFunction 用于指定过渡的速度曲线。 transitionDelay 用于指定过渡将在多长时间后开始。
要使用 JavaScript 设置四个过渡属性，我们有多种方法，在本教程中，我们将讨论其中两种 -
使用 style.transition 属性
使用 style.setProperty() 方法
使用 style.transition 属性
在 JavaScript 中，元素的 style.transition 属性用于设置元素的四个过渡属性。由于元素对象中存在 style.transition 属性，我们需要先使用 document.getElementById() 方法访问元素对象，然后使用此属性设置四个过渡属性。
语法
const object = document.getElementById('id')
object.style.transition = transitionProperty transitionDuration transitionTimingFunction transitionDelay | inherit | initial
在上述语法中，document.getElementById()方法用于访问id属性为'id'的HTML元素的元素对象，然后我们设置style.transition属性。
参数
transitionProperty − 应具有过渡效果的属性名称。
transitionDuration − 完成过渡效果的总时间。
transitionTimingFunction − 过渡效果的速度曲线。
transitionDelay − 启动过渡效果的时间延迟。
inherit − transition属性由其父元素继承。
initial − transition 属性设置为默认值。
示例
在下面的示例中，我们使用 style.transition 属性通过 JavaScript 设置了四个过渡属性。我们使用按钮"Set Transition"单击事件来执行"setTransition()"函数，该函数为多个元素设置过渡效果。
<html> <head> <style> .transition { padding: 10px; margin: 5px 0px; border: 1px solid gray; background-color: aliceblue; width: 30%; } .transition:hover { width: 90%; } </style> </head> <body> <h2>Using the style.transition Property</h2> <p>Please Hover over the DIVs to see the transition before and after clicking the "Set Transition" button.</p> <button onclick="setTransition()"> Set Transition </button> <div> <div id="element1" class="transition"> transition: width 2s linear 1s </div> <div id="element2" class="transition"> transition: all 1s ease-in 0.1s </div> <div id="element3" class="transition"> transition: all 0.1s ease-out 0.1s </div> </div> <script> const element1 = document.getElementById('element1') const element2 = document.getElementById('element2') const element3 = document.getElementById('element3') // 'Set Transition' button click event handler function function setTransition() { element1.style.transition = 'width 1s linear 1s' element2.style.transition = 'all 1s ease-in 0.1s' element3.style.transition = 'all 0.1s ease-out 0.1s' } </script> </body> </html>
使用 style.setProperty() 方法
在 JavaScript 中，style.setProperty 方法设置元素的属性，无论是新的还是现有的。也可以使用此方法设置 transition 属性。首先，使用 document.getElementById() 方法访问元素，然后使用 style.setProperty 方法设置"transition"属性。 style.setProperty 方法的属性名称参数应为'transition'，值和优先级将根据用户的要求而定。
语法
const object = document.getElementById('id')
object.style.setProperty(property_name, value, priority)
在上述语法中，document.getElementById() 方法用于访问 id 属性为'id'的 HTML 元素的元素对象，然后我们在该元素对象上使用 style.setProperty 方法。
参数
property_name − 要设置的属性的名称。
value − 属性的新值属性。
priority − 属性值的优先级(可选)。
示例
在下面的示例中，我们使用 style.setProperty 方法通过 JavaScript 设置四个过渡属性。我们使用四个输入字段来获取用户对过渡的四个属性的输入:transitionProperty、transitionDuration、transitionTimingFunction 和 transitionDelay。按钮"设置过渡"与执行"setTransition()"函数的点击事件相关联，该函数设置元素的四个过渡属性。
<html> <head> <style> #root { padding: 20px; margin: 5px 0px; border: 1px solid black; background-color: aliceblue; width: 30%; } #root:hover { width: 90%; background-color: aqua; } label { margin-right: 5px; font-weight: bold; } .input-field { margin-bottom: 5px; } </style> </head> <body> <h2>Using <i> style.setProperty() </i> method with JavaScript</h2> <p> Please Hover over the below box to see the transition before and after clicking the "Set Transition" button.</p> <h4>Enter the four properties of transition:</h4> <div> <div class="input-field"> <label for="transitionProperty"> transitionProperty: </label> <input id="transitionProperty" type="text" name="transitionProperty" value="all"> </div> <div class="input-field"> <label for="transitionDuration"> transitionDuration: </label> <input id="transitionDuration" type="text" name="transitionDuration" value="2s"> </div> <div class="input-field"> <label for="transitionTimingFunction"> transitionTimingFunction: </label> <input id="transitionTimingFunction" type="text" name="transitionTimingFunction" value="linear"> </div> <div class="input-field"> <label for="transitionDelay"> transitionDelay: </label> <input id="transitionDelay" type="text" name="transitionDelay" value="0.2s"> </div> </div> <button onclick="setTextDecoration()"> Set Transition </button> <div id="root"> Welcome to Tutorialspoint! </div> <script> function setTextDecoration() { const root = document.getElementById('root') // All input fields' value const transitionProperty = document.getElementById('transitionProperty').value const transitionDuration = document.getElementById('transitionDuration').value const transitionTimingFunction = document.getElementById('transitionTimingFunction').value const transitionDelay = document.getElementById('transitionDelay').value root.style.setProperty('transition', transitionProperty + ' ' + transitionDuration + ' ' + transitionTimingFunction + ' ' + transitionDelay) } </script> </body> </html>
在没有输入字段值的情况下单击"设置过渡"按钮之前，元素悬停时会发生过渡，但没有过渡效果。
在输入字段值的情况下单击"设置过渡"按钮之后，根据输入字段值，在元素悬停时会发生过渡效果。
在本教程中，我们讨论了使用 JavaScript 设置四个过渡属性的两种方法。第一种方法是使用 style.transition 属性，另一种方法是使用 style.setProperty() 方法。
