how to generate an animation in a frame

Question

In the image I show a program in which I try to show a frame at the moment the mouse is on my main orange frame. However, the appearance of the frame is very abrupt. I would like to know if we could create a kind of animation so that instead of appearing in that way it seems that the frame slides to the right

code:

from PyQt5.QtWidgets import QMainWindow,QApplication
from PyQt5 import uic 
from PyQt5 import Qt
from PyQt5 import QtCore

class Principal(QMainWindow):
    def __init__(self):
        QMainWindow.__init__(self)
        uic.loadUi("we.ui",self)

        self.setAttribute(Qt.Qt.WA_TranslucentBackground, True )   
        self.setAttribute(Qt.Qt.WA_NoSystemBackground, False)      
        self.setWindowFlags(Qt.Qt.FramelessWindowHint)
        self.frame1.installEventFilter(self)

    def eventFilter(self,watched,event):
        if self.frame1 is watched:
            if event.type() == QtCore.QEvent.Enter:
                self.frame2.resize(121,self.height())
            elif event.type() == QtCore.QEvent.Leave:
                self.frame2.resize(10,10)
        return super(Principal,self).eventFilter(watched,event)

app = QApplication([])
p = Principal()
p.show()
app.exec_()

file.ui:

<?xml version="1.0" encoding="UTF-8"?>
      <ui version="4.0">
       <class>MainWindow</class>
       <widget class="QMainWindow" name="MainWindow">
        <property name="geometry">
         <rect>
          <x>0</x>
          <y>0</y>
          <width>552</width>
          <height>397</height>
         </rect>
        </property>
        <property name="windowTitle">
         <string>MainWindow</string>
        </property>
        <property name="styleSheet">
         <string notr="true">background:qlineargradient(spread:pad, x1:0.565, y1:0, x2:0.508475, y2:1, stop:0 rgba(0, 0, 103, 0), stop:1 rgba(255, 255, 255, 0));</string>
        </property>
        <widget class="QWidget" name="centralwidget">
         <property name="styleSheet">
          <string notr="true"/>
         </property>
         <widget class="QPushButton" name="Ajustes">
          <property name="geometry">
           <rect>
            <x>406</x>
            <y>0</y>
            <width>31</width>
            <height>23</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">QPushButton#Ajustes{
      background:none;
      border:0px;
      }</string>
          </property>
          <property name="text">
           <string/>
          </property>
          <property name="icon">
           <iconset>
            <normaloff>settings.png</normaloff>settings.png</iconset>
          </property>
         </widget>
         <widget class="QFrame" name="frame1">
          <property name="geometry">
           <rect>
            <x>0</x>
            <y>0</y>
            <width>431</width>
            <height>401</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">background:orange;</string>
          </property>
          <property name="frameShape">
           <enum>QFrame::StyledPanel</enum>
          </property>
          <property name="frameShadow">
           <enum>QFrame::Raised</enum>
          </property>
         </widget>
         <widget class="QFrame" name="frame2">
          <property name="geometry">
           <rect>
            <x>430</x>
            <y>0</y>
            <width>0</width>
            <height>401</height>
           </rect>
          </property>
          <property name="styleSheet">
           <string notr="true">background:red;</string>
          </property>
          <property name="frameShape">
           <enum>QFrame::StyledPanel</enum>
          </property>
          <property name="frameShadow">
           <enum>QFrame::Raised</enum>
          </property>
         </widget>
         <zorder>frame1</zorder>
         <zorder>Ajustes</zorder>
         <zorder>frame2</zorder>
        </widget>
       </widget>
       <resources/>
       <connections/>
      </ui>

I hope you can help me I have looked for something related but I can not find how to make such animations if you can call them that way

Answer 1

You must use a QPropertyAnimation:

from PyQt5 import QtCore, QtWidgets, uic 

class Principal(QtWidgets.QMainWindow):
    def __init__(self):
        super(Principal, self).__init__()
        uic.loadUi("we.ui",self)
        self.setAttribute(QtCore.Qt.WA_TranslucentBackground, True)   
        self.setAttribute(QtCore.Qt.WA_NoSystemBackground, False)      
        self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
        self.frame1.installEventFilter(self)
        self._animation = QtCore.QPropertyAnimation(self.frame2, b'size', self)
        self._animation.setStartValue(QtCore.QSize(0, self.height()))
        self._animation.setEndValue(QtCore.QSize(121, self.height()))
        self._animation.setDuration(200)

    def eventFilter(self, watched, event):
        if self.frame1 is watched:
            if event.type() == QtCore.QEvent.Enter:
                self._animation.setDirection(QtCore.QAbstractAnimation.Forward)
                self._animation.start()
            elif event.type() == QtCore.QEvent.Leave:
                self._animation.setDirection(QtCore.QAbstractAnimation.Backward)
                self._animation.start()
        return super(Principal,self).eventFilter(watched, event)

if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    p = Principal()
    p.show()
    sys.exit(app.exec_())