28 replies

Why isn't this transitioning the width back @starting-style value when the hidden attribute exist?

I'm a learner and I want to keep it simple to understand the fundamentals. In this webpage, I am trying to test CSS transitions. I want to transition the paragraph width from small to big and back based on whether it's hidden or not but the transition fails to happen when transitioning from no hidden attribute to hidden.

I want to know why and how can I do that while keeping it as simple as possible.

Here's the page: https://cdpn.io/pen/debug/yyNjzwp?authentication_hash=VJMxxqaLZYRM

I use a loop to make it disappear and reappear two times but the width only animates when it goes from hidden to no hidden attribute and not the other way.

Here's the code just in case:

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  

  <title>Untitled</title>

    <link rel="canonical" href="https://codepen.io/superhuman2/pen/MYwGExQ">
  
  
  
  
<style>
p {
  border: solid;
  inline-size: 89%;
  transition-property: inline-size;
  transition-duration: 3s;
  @starting-style {
    inline-size: 33%;
  }
  
}
</style>

  
  
  
</head>

<body>
  <p id="foo">This is a test</p>
  
      <script id="rendered-js" >
(async function () {
  for (let i = 0; i < 4; i++) {
    await new Promise(res => setTimeout(function () {
     foo.toggleAttribute('hidden');
      res();
    }, 5000));
  }
})()
    </script>

  
</body>

</html>

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  

  <title>Untitled</title>

    <link rel="canonical" href="https://codepen.io/superhuman2/pen/MYwGExQ">
  
  
  
  
<style>
p {
  border: solid;
  inline-size: 89%;
  transition-property: inline-size;
  transition-duration: 3s;
  @starting-style {
    inline-size: 33%;
  }
  
}
</style>

  
  
  
</head>

<body>
  <p id="foo">This is a test</p>
  
      <script id="rendered-js" >
(async function () {
  for (let i = 0; i < 4; i++) {
    await new Promise(res => setTimeout(function () {
     foo.toggleAttribute('hidden');
      res();
    }, 5000));
  }
})()
    </script>

  
</body>

</html>

Thank you in advance for your help!

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  

  <title>Untitled</title>

    <link rel="canonical" href="https://codepen.io/superhuman2/pen/MYwGExQ">
  
  
  
  
<style>
p {
  border: solid;
  inline-size: 89%;
  transition-property: inline-size;
  transition-duration: 3s;
  @starting-style {
    inline-size: 33%;
  }
  
}
</style>

  
  
  
</head>

<body>
  <p id="foo">This is a test</p>
  
      <script id="rendered-js" >
(async function () {
  for (let i = 0; i < 4; i++) {
    await new Promise(res => setTimeout(function () {
     foo.toggleAttribute('hidden');
      res();
    }, 5000));
  }
})()
    </script>

  
</body>

</html>

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  

  <title>Untitled</title>

    <link rel="canonical" href="https://codepen.io/superhuman2/pen/MYwGExQ">
  
  
  
  
<style>
p {
  border: solid;
  inline-size: 89%;
  transition-property: inline-size;
  transition-duration: 3s;
  @starting-style {
    inline-size: 33%;
  }
  
}
</style>

  
  
  
</head>

<body>
  <p id="foo">This is a test</p>
  
      <script id="rendered-js" >
(async function () {
  for (let i = 0; i < 4; i++) {
    await new Promise(res => setTimeout(function () {
     foo.toggleAttribute('hidden');
      res();
    }, 5000));
  }
})()
    </script>

  
</body>

</html>

Thank you in advance for your help!

Why isn't this transitioning the width back @starting-style value when the hidden attribute exist?

Similar Threads

Why isn't this transitioning the width back @starting-style value when the hidden attribute exist?

Similar Threads

Similar Threads

Similar Threads