Search Unity

Bug :Active Not Working With Transitions

Discussion in 'UI Toolkit' started by MousePods, Jun 23, 2021.

  1. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    I have an element I want to grow when hover/mouse held down.

    Code (CSharp):
    1. .button-hover-grow-animation:hover {
    2.     scale: 1.2 1.2;
    3. }
    4.  
    5. .button-hover-grow-animation:active {
    6.     scale: 1.2 1.2;
    7. }
    This works perfectly except for the instance where,

    1. Hover mouse over button (it grew)
    2. Press on the left mouse button and move mouse off, it shrinks.
    3. Keep pressing left mouse button and move back onto button, it doesn't grow.
    Is this normal functionally or is it a bug?

    Thanks!
     
    MousePods, Jun 23, 2021
    #1

  2. uBenoitA

    uBenoitA

    Unity Technologies

    Joined:
    Apr 15, 2020
    Posts:
    220
    Hi MousePods,

    Could be a bug, but just to make sure:
    1. What is the element's pseudo-state in the UI Debugger? Does it become hovered at all, in the 3rd scenario?
    2. If I understand correctly, you are getting the desired final scale but the transition is being skipped, is that right?
    3. Are you in Play mode, or in an EditorWindow?
     
    uBenoitA, Jun 23, 2021
    #2

  3. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    No, it says none.

    No, the transition doesn't happen.

    I am in play mode.

    In the video, I put the mouse over the button, press the left mouse button, and move it off. Will holding the left mouse button down. I move it back on, it should scale up even though the mouse is pressed down, but it ignores it. You can also see the hover state isn’t working in the debug window.



    The weird thing is, if I press the left mouse button when it isn’t hovering over the button and then hover over it, it works.
     
    Last edited: Jun 24, 2021
    MousePods, Jun 23, 2021
    #3

  4. uBenoitA

    uBenoitA

    Unity Technologies

    Joined:
    Apr 15, 2020
    Posts:
    220
    Well, it looks very much like a bug to me. Could you open a bug report please?
     
    uBenoitA, Jun 29, 2021
    #4

  5. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    Bug Report: 1346763

    I recently changed the order of my button uxml and it suddenly worked. It seems that my previous layout was the issue. I posted the bug with both the button layouts.

    Thanks!
     
    MousePods, Jun 29, 2021
    #5

  6. uBenoitA

    uBenoitA

    Unity Technologies

    Joined:
    Apr 15, 2020
    Posts:
    220
    Yes indeed, your change in layout is what did it. When a button has mouse capture, it receives the hover state but its parents don't, whereas when it doesn't have mouse capture, then all the elements under the mouse receive the hover state as normal, which explains what you are seeing. Apparently this isn't a bug, it's the way the web does it too:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .button-hover-grow-animation {
    transition-duration: 0.2s;
    transition-property: transform;
    }
    .button-hover-grow-animation:hover {
    transform: scale(1.2);
    }
    button {
    width: 300px;
    height: 300px;
    }
    </style>
    </head>
    <body>
    <div>
    <button text="Works" display-tooltip-when-elided="true" class="button-hover-grow-animation" style="font-size: 80px;">
    <div />
    </button>
    </div>
    <div class="button-hover-grow-animation">
    <div />
    <button text="Bug" display-tooltip-when-elided="true" style="font-size: 80px;" />
    </div>
    </body>
    </html>
     
    uBenoitA, Jul 5, 2021
    #6
    MousePods likes this.

  7. MousePods

    MousePods

    Joined:
    Jul 19, 2012
    Posts:
    811
    Ah, that makes sense, thanks! Hopefully this will help others who might run into this situation. I will reply to the bug to get it closed.
     
    MousePods, Jul 5, 2021
    #7