What are the triggering methods for css3 transition?-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

What are the triggering methods for css3 transition?

青灯夜游

Dec 15, 2021 am 11:20 AM

css3Trigger modetransition

There are 2 triggering methods for css3 transition: 1. Triggered by pseudo-class elements, including ":hover", ":focus", ":checked", etc.; 2. Triggered by JS, using js or Jquery The code modifies the CSS properties and triggers the gradient of the transition.

What are the triggering methods for css3 transition?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

#transition

transition is the simplest animation in CSS3. When the properties of an element change, it can be presented in a gradient; the following code is an example on w3c, The result of adding transition is that when hovering, the length will gradually increase to 300px.

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

css3 transition triggering method

First way: Pass Pseudo-class elements are triggered, including hover, focus, checked, etc.

<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        transition: width 1s linear .5s;
    }
    .box:hover{
        width: 400px;
    }
</style>

<p class="box"></p>

But in actual use, we mostly use JS or Jquery to directly modify attributes, but we found that this does not work.

Second: Triggered through JS

If you use JS or Jquery to directly modify CSS properties

The JS triggering method should be that its class changes So that new styles can be obtained.

My understanding is that the element must be changed to make it different so that it can acquire some new attributes. This is the case for pseudo-class triggering. For JS triggering, it should be that its class changes so that it can Get new styles.

By adding a newclass to p, causing p to change and obtain the class, the gradient of the transition can be triggered.

<style>
    .box{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
      transition: width 1s linear .5s;
    }
    .box1{
      width: 400px;
    }
</style>

<p class="box"></p>

<scrpit>
    setTimeout(() => {
      let element = document.getElementsByClassName(&#39;box&#39;)[0];
      element.classList.add(&#39;box1&#39;)

    }, 1) 
</scrpit>

(Learning video sharing: css video tutorial)

The above is the detailed content of What are the triggering methods for css3 transition?. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

CSS: Can I use multiple IDs in the same DOM?May 14, 2025 am 12:20 AM

No,youshouldn'tusemultipleIDsinthesameDOM.1)IDsmustbeuniqueperHTMLspecification,andusingduplicatescancauseinconsistentbrowserbehavior.2)Useclassesforstylingmultipleelements,attributeselectorsfortargetingbyattributes,anddescendantselectorsforstructure

The Aims of HTML5: Creating a More Powerful and Accessible WebMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebcapabilities,makingitmoredynamic,interactive,andaccessible.1)Itsupportsmultimediaelementslikeand,eliminatingtheneedforplugins.2)Semanticelementsimproveaccessibilityandcodereadability.3)Featureslikeenablepowerful,responsivewebappl

Significant Goals of HTML5: Enhancing Web Development and User ExperienceMay 14, 2025 am 12:18 AM

HTML5aimstoenhancewebdevelopmentanduserexperiencethroughsemanticstructure,multimediaintegration,andperformanceimprovements.1)Semanticelementslike,,,andimprovereadabilityandaccessibility.2)andtagsallowseamlessmultimediaembeddingwithoutplugins.3)Featur

HTML5: Is it secure?May 14, 2025 am 12:15 AM

HTML5isnotinherentlyinsecure,butitsfeaturescanleadtosecurityrisksifmisusedorimproperlyimplemented.1)Usethesandboxattributeiniframestocontrolembeddedcontentandpreventvulnerabilitieslikeclickjacking.2)AvoidstoringsensitivedatainWebStorageduetoitsaccess

HTML5 goals in comparison with older HTML versionsMay 14, 2025 am 12:14 AM

HTML5aimedtoenhancewebdevelopmentbyintroducingsemanticelements,nativemultimediasupport,improvedformelements,andofflinecapabilities,contrastingwiththelimitationsofHTML4andXHTML.1)Itintroducedsemantictagslike,,,improvingstructureandSEO.2)Nativeaudioand

CSS: Is it bad to use ID selector?May 13, 2025 am 12:14 AM

Using ID selectors is not inherently bad in CSS, but should be used with caution. 1) ID selector is suitable for unique elements or JavaScript hooks. 2) For general styles, class selectors should be used as they are more flexible and maintainable. By balancing the use of ID and class, a more robust and efficient CSS architecture can be implemented.

HTML5: Goals in 2024May 13, 2025 am 12:13 AM

HTML5'sgoalsin2024focusonrefinementandoptimization,notnewfeatures.1)Enhanceperformanceandefficiencythroughoptimizedrendering.2)Improveaccessibilitywithrefinedattributesandelements.3)Addresssecurityconcerns,particularlyXSS,withwiderCSPadoption.4)Ensur

What are the main areas where HTML5 tried to improve?May 13, 2025 am 12:12 AM

HTML5aimedtoimprovewebdevelopmentinfourkeyareas:1)Multimediasupport,2)Semanticstructure,3)Formcapabilities,and4)Offlineandstorageoptions.1)HTML5introducedandelements,simplifyingmediaembeddingandenhancinguserexperience.2)Newsemanticelementslikeandimpr

See all articles